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