十八次（虚拟主机与vue项目、samba磁盘映射、nfs共享）

最新推荐文章于 2024-09-13 14:34:15 发布

祎安139

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量963

点赞数 8

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_65862118/article/details/140831122

版权

1、虚拟主机搭建环境准备

将原有的nginx.conf文件备份

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

原则上一个配置文件拥有一个http区块，并且只有一个

一个http可以有多个server区块

一个server区块成为一个虚拟主机

一个虚拟主机对应一个项目一个server区块可以有多个location区块

每个location就是一个url链接的匹配规则

2、基于域名的虚拟主机

 [root@server ~]# vim /usr/local/nginx/conf/nginx.conf
 server {
        listen       80;
        server_name  localhost;
        root html;              //目录定位
        location / {
            index index.html;
        }
 [root@server ~]# mkdir /baibai     //创建一个页面根目录
[root@server ~]# echo "hello,i am baibai" > /baibai/index.html     //创建一个
首页
[root@server ~]# cat /baibai/index.html 
hello,i am baibai
在主配置文件中新创建一个七层模块server
 [root@server ~]# vim /usr/local/nginx/conf/nginx.conf
 http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
              listen  80;
              server_name   www.baibai.com;
              root    /baibai;        //目录定位
              location  /  {   
                       index   index.html;
              }
    }
主机解释ip（本机自行进行域名解析）
[root@server ~]# vim /etc/hosts    //windows路径：
c:/windown/system32/drivers/etc/host/
 ......
 10.0.0.10 www.baibai.com
 [root@server ~]# curl www.baibai.com
 hello,i am baibai

一个服务器上同时部署多个项目,为了方便维护，可以将server模块单独抽离出来创建conf文件，然后在主配置文件中使用include添加外部配置，这样让操作更加模块化。将两个server分开到两个配置文件中

[root@server ~]# mkdir /usr/local/nginx/conf.d/    //创建新的配置文件目录
[root@server ~]# sed -n '11,18p' /usr/local/nginx/conf/nginx.conf
    server {
              listen  80;
              server_name   www.baibai.com;
              root    /baibai;
              location  /  {
                       index   index.html;
              }
    }
 [root@server ~]# sed -n '11,18p' /usr/local/nginx/conf/nginx.conf > 
/usr/local/nginx/conf.d/baibai.conf     //创建新的配置文件
[root@server ~]# cat /usr/local/nginx/conf.d/baibai.conf 
    server {
              listen  80;
              server_name   www.baibai.com;
              root    /baibai;
              location  /  {
                       index   index.html;
              }
    }
 [root@server ~]# sed -i '11,18d' /usr/local/nginx/conf/nginx.conf    //原配置
文件中删除该server
 [root@server ~]# vim /usr/local/nginx/conf/nginx.conf
 http {
    include       mime.types;
     default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    include   ../conf.d/*.conf;      //包含（引入）位于上级目录中的conf.d文件夹下的
所有以.conf 为扩展名的配置文件
[root@server ~]# /usr/local/nginx/sbin/nginx -s reload

3、于不同ip地址的虚拟主机

[root@server ~]# ifconfig ens33:1 10.0.0.11   //加一张网卡
[root@server ~]# ifconfig
 ens33: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
        inet 10.0.0.10  netmask 255.255.255.0  broadcast 10.0.0.255
 ens33:1: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
        inet 10.0.0.11  netmask 255.0.0.0  broadcast 10.255.255.255
        ether 00:0c:29:b1:2d:68  txqueuelen 1000  (Ethernet)
 [root@server ~]# vim /usr/local/nginx/conf/nginx.conf
 server {
        listen       80;
        server_name  10.0.0.10;     //修改为10.0.0.10
        root html;         //目录定位
        location / {
            index index.html;
              }
 [root@server ~]# vim /usr/local/nginx/conf.d/baibai.conf 
  server {
              listen  80;
              server_name   10.0.0.11;    //修改为10.0.0.11
              root    /baibai;    //目录定位
              location  /  {
                       index   index.html;
              }
    }
 [root@server ~]# /usr/local/nginx/sbin/nginx -s reload

4、基于不同端口的虚拟主机

设置两个server都基于相同的ip地址

[root@server ~]# vim /usr/local/nginx/conf.d/baibai.conf 
server {
              listen  80;
              server_name   10.0.0.10;
              root    /baibai;
              location  /  {
                       index   index.html;
              }
    }
 [root@server ~]# /usr/local/nginx/sbin/nginx -s reload
 nginx: [warn] conflicting server name "10.0.0.10" on 0.0.0.0:80, ignored     
//报错，产生冲突
[root@server ~]# vim /usr/local/nginx/conf.d/baibai.conf 
    server {
              listen  8080;        //修改端口
              server_name   10.0.0.10;
              root    /baibai;
                location  /  {
                       index   index.html;
              }
    }
 [root@server ~]# /usr/local/nginx/sbin/nginx -s reload

5、上线商城系统

上线一个静态的前端系统安装npm 添加vue模块使用vue创建vue3项目，构建静态资源将静态资源添加到nginx项目在安装nodejs之前，需要检查是否安装了epel

（1）项目创建的环境准备

[root@server ~]# yum list install | grep epel    //检查epel环境
[root@server ~]# yum list | grep nodejs   //查询nodejs软件包
[root@server ~]# yum -y install nodejs    //安装nodejs
[root@server ~]# node -v    //查看nodejs版本
v16.20.2
[root@server ~]# yum -y install npm    //安装npm（nodejs的包管理器，rpm是红帽的包
管理器）
[root@server ~]# npm -v   //查看npm版本
8.19.4
默认npm下载文件的链接在国家域外，下载很慢，所以使用淘宝的镜像
[root@server ~]# npm config set registry https://registry.npmmirror.com     
//下载国内的包（而不是下载国外的包）
[root@server ~]# npm install @vue/cli    //使用nmp安装vue
[root@server ~]# find / -name "vue"   //查找vue文件
/root/node_modules/vue
 /root/node_modules/.bin/vue
[root@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@server ~]# /root/node_modules/.bin/vue -V   //查看vue版本
@vue/cli 5.0.8
[root@server ~]# ln -s /root/node_modules/.bin/vue  /usr/bin/   //创建软链接
[root@server ~]# vue -V
 @vue/cli 5.0.8

（2）创建vue项目

 [root@server ~]# vue create eleme_web  （空格选择，回车下一步）   //创建名为
eleme_web的项目

选择Manually select features 按回车

选择Router和Vuex按空格后按回车

一直回车到下图所示

项目创建完成，按照提示信息进行下一步操作

[root@server ~]# cd eleme_web/
[root@server eleme_web]# npm run serve   //运行服务

浏览器访问：10.0.0.10:8080

[root@server eleme_web]# nohup npm run serve&    //将服务放到后台执行
[1] 3024
[root@server eleme_web]# nohup: 忽略输入并把输出追加到"nohup.out"
[root@server eleme_web]# fg    //将进程杀死
nohup npm run serve
 ^C
[root@server eleme_web]# fg-bash: fg: 当前: 无此任务

（3）配置samba

linux系统与windows系统磁盘映射实现文件共享

安装samba

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

编辑配置文件

[root@static eleme_web]# vim /etc/samba/smb.conf

[eleme_web]

        comment=yjj

        path=/root/eleme_web

        guest ok=no

        writable=yes
[root@static eleme_web]# useradd vueediter
[root@static eleme_web]# smbpasswd -a vueediter
New SMB password:1
Retype new SMB password:1
Added user vueediter.

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

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

启动服务

[root@static eleme_web]# systemctl start nmb
[root@static eleme_web]# systemctl start smb

windows测试：点击此电脑-----计算机-------映射网络驱动器

创建nfs环境

[root@server eleme_web]# mkdir public/img
[root@server eleme_web]# mkdir public/video
[root@server eleme_web]# mkdir public/music

部署nfs服务器

[root@eleme ~]# yum -y install rpcbind
[root@eleme ~]# yum -y install nfs-utils
[root@eleme ~]# vim /etc/exports
/static/img/ *{rw,sync}   #共享/static/img/目录   所有人可以访问   拥有读写权限和同步功能
[root@eleme ~]# mkdir -p /static/img/
[root@elemestatic ~]# systemctl start nfs    //启动nfs服务
[root@elemestatic ~]# systemctl start rpcbind   //启动rpcbind服
[root@server eleme_web]# mount -t nfs 10.0.0.50:/static/img/  ./public/img/   
  //将nfs服务器共享的目录挂载到/root/eleme_web/public/img/下
将图片拖拽到nfs服务器主机的共享目录中
[root@elemestatic img]# ls
1.jpg
[root@server img]# ls    //nfs客户端中可以查看图片
1.jpg

修改vue页面

[root@server eleme_web]# cd src/views/
[root@server views]# ls
 AboutView.vue  HomeView.vue
[root@server views]# vim HomeView.vue 
 <img alt="Vue logo" src="img/1.jpg">