综合项目部署——eleme前端部署（eighteen day）

显示没有空格没有注释的内容：

[root@static-server ~]# grep -Ev "#|^$" /usr/local/nginx/conf/nginx.conf

1、多虚拟主机的配置

[root@static-server ~]# vim /usr/local/nginx/conf/nginx.conf

[root@static-server ~]# /usr/local/nginx/sbin/nginx #启动nginx服务

创建项目，用于部署在nginx中发布到网络

[root@static-server ~]# mkdir /xiaojiang

[root@static-server ~]# echo "hello,i am xiaojiang" > /xiaojiang/index.html

[root@static-server ~]# cat /xiaojiang/index.html

hello,i am xiaojiang

[root@static-server ~]# vim /usr/local/nginx/conf/nginx.conf

5 http {
6 include mime.types;
7 default_type application/octet-stream;
8 sendfile on;
9 keepalive_timeout 65;
10
11 server{
12 listen 80;
13 server_name www.xiaojiang.com;
14 root /xiaojiang;
15 location / {
16 index index.html;
17 }
18 }

[root@static-server ~]# vim /etc/hosts

192.168.1.11 www.xiaojiang.com #最后一行加这个

[root@static-server ~]# /usr/local/nginx/sbin/nginx -s reload

[root@static-server ~]# curl www.xiaojiang.com

hello,i am xiaojiang

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

如果想在物理机浏览器上访问到www.xiaojiang.com,则需要以下操作

物理机打开此位置C:\Windows\System32\drivers\etc

记事本打开hosts

最后一行加入 ( 192.168.1.10 www.xiaojiang.com)

替换文件

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

将刚才配置的server模块保存到一个新的文件中

[root@static-server ~]# sed -n "10,19p" /usr/local/nginx/conf/nginx.conf

server{
listen 80;
server_name www.xiaojiang.com;
root /xiaojiang;
location / {
index index.html;
}
}

[root@static-server ~]# mkdir /usr/local/nginx/conf.d/

[root@static-server ~]# sed -n "10,19p" /usr/local/nginx/conf/nginx.conf > /usr/local/nginx/conf.d/xiaojiang.conf

[root@static-server ~]# cat /usr/local/nginx/conf.d/xiaojiang.conf

server{
listen 80;
server_name www.xiaojiang.com;
root /xiaojiang;
location / {
index index.html;
}
}

[root@static-server ~]# sed -i "10,19d" /usr/local/nginx/conf/nginx.conf #删除10~19行的内容

[root@static-server ~]# vim /usr/local/nginx/conf.d/xiaojiang.conf

include ../conf.d/*.conf;

[root@static-server ~]# /usr/local/nginx/sbin/nginx -s reload

2、基于IP的地址访问不同的虚拟主机

创建新的IP挂在这个网课上

[root@static-server ~]# ifconfig ens160:1 192.168.1.88

[root@static-server ~]# ifconfig
ens160: flags=4163<UP,BROADCAST,RUNNING,MULTICAST> mtu 1500
inet 192.168.1.11 netmask 255.255.255.0 broadcast 192.168.1.255
inet6 fe80::cad1:833a:a57c:8cc3 prefixlen 64 scopeid 0x20<link>
ether 00:0c:29:4d:db:fd txqueuelen 1000 (Ethernet)
RX packets 3795 bytes 361264 (352.7 KiB)
RX errors 0 dropped 0 overruns 0 frame 0
TX packets 2587 bytes 329330 (321.6 KiB)
TX errors 0 dropped 0 overruns 0 carrier 0 collisions 0

ens160:1: flags=4163<UP,BROADCAST,RUNNING,MULTICAST> mtu 1500
inet 192.168.1.88 netmask 255.255.255.0 broadcast 192.168.1.255
ether 00:0c:29:4d:db:fd txqueuelen 1000 (Ethernet)

这个IP地址可以正常使用

[root@static-server ~]# vim /usr/local/nginx/conf.d/xiaojiang.conf

server{
listen 80;
server_name 192.168.1.88;
root /xiaojiang;
location / {
index index.html;
}
}

[root@static-server ~]# vim /usr/local/nginx/conf/nginx.conf

server {
listen 80;
server_name 192.168.1.11;
location / {
index index.html;
}

[root@static-server ~]# /usr/local/nginx/sbin/nginx -s reload

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

3、基于端口的虚拟主机

[root@static-server ~]# vim /usr/local/nginx/conf.d/xiaojiang.conf

server{
listen 8080;
server_name 192.168.1.11;
root /xiaojiang;
location / {
index index.html;
}
}

[root@static-server ~]# /usr/local/nginx/sbin/nginx -s reload

仅限于公司内部测试

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

4、上线一个静态的前端系统

nodejs 安装npm添加vue模块，使用vue创建vue3项目，构建静态资源，将静态资源添加到nginx项目中

在安装nodejs之前，需要检查是否安装epel

[root@static-server ~]# yum list installed | grep epel #检查是否安装了epel

[root@static-server ~]# yum -y install epel-release

[root@static-server ~]# yum -y install nodejs

[root@static-server ~]# node -v #检查是否安装nodejs（运行环境）

[root@static-server ~]# yum -y install npm

[root@static-server ~]# npm -v

[root@static-server ~]# npm config set registry https://registry.npmmirror.com#安装淘宝镜像

[root@static-server ~]# npm install @vue/cli #安装vue脚本架（必须要进行前面一步）

[root@static-server ~]# ls -l /root/node_modules/.bin/vue
lrwxrwxrwx 1 root root 22 7月 31 14:40 /root/node_modules/.bin/vue -> ../@vue/cli/bin/vue.js

[root@static-server ~]# /root/node_modules/.bin/vue -V
@vue/cli 5.0.8

#创建vue项目（eleme）

[root@static-server ~]# /root/node_modules/.bin/vue create eleme_web

[root@static-server ~]# cd eleme_web/

[root@static-server eleme_web]# npm run serve

物理机浏览器访问http://192.168.1.11:8081/

[root@static-server eleme_web]# nohup npm run serve&

[1] 1730
[root@static-server eleme_web]# nohup: 忽略输入并把输出追加到"nohup.out"

[root@static-server eleme_web]# tail -f nohup.out

[root@static-server eleme_web]# fg

nohup npm run serve

[root@static-server eleme_web]# yum -y install samba

编辑配置文件

[root@static-server eleme_web]# vim /etc/samba/smb.conf （最后一行加以下内容）
[eleme_web]
comment=xiaojiang
path=/root/eleme_web
guest ok=no
writable=yes

[root@static-server eleme_web]# useradd vueediter #创建用户

[root@static-server eleme_web]# smbpasswd -a vueediter
New SMB password:123
Retype new SMB password:123
Added user vueediter.

#为该用户在文件夹中添加读写权限

[root@static-server eleme_web]# setfacl -m u:vueediter:rwx /root/eleme_web/

启动服务

[root@static-server eleme_web]# systemctl start smb.service

[root@static-server eleme_web]# systemctl start nmb.service

[root@static-server eleme_web]# ls -l public/
总用量 12
-rw-r--r-- 1 root root 4286 7月 31 15:04 favicon.ico
-rw-r--r-- 1 root root 611 7月 31 15:04 index.html

[root@static-server eleme_web]# mkdir public/img

[root@static-server eleme_web]# mkdir public/video

[root@static-server eleme_web]# mkdir public/music

[root@static-server eleme_web]# tree public/

public/

├── favicon.ico

├── img

├── index.html

├── music

└── video

[root@static-server eleme_web]# yum -y install nfs-utils.x86_64

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

部署nfs服务器（eleme-static）

[root@eleme-static ~]# yum -y install rpcbind.x86_64

[root@eleme-static ~]# yum -y install nfs-utils.x86_64

[root@eleme-static ~]# vim /etc/exports

/static/img/ *(rw,sync)

[root@eleme-static ~]# mkdir -p /static/img/

[root@eleme-static ~]# systemctl start rpcbind.service

[root@eleme-static ~]# systemctl start nfs

[root@eleme-static ~]# netstat -lnput | grep rpc #查看端口是否开启

[root@static-server components]# cd ..

[root@static-server src]# ls views/

AboutView.vue HomeView.vue

[root@static-server src]# vim views/HomeView.vue
<template>
<div class="home">
<img alt="Vue logo" src="img/猪猪侠.jpg">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
name: 'HomeView',
components: {
HelloWorld
}
}
</script>

[root@static-server eleme_web]# nohup npm run serve&