综合项目部署——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&