八月一日（day 19） nginx4

部署nodejs项目
[root@server1 ~]# yum -y install nodejs                     //安装nodejs
[root@server1 ~]# node -v                                         //查看版本
v16.20.2
[root@server1 ~]# yum -y install npm                        //安装npm
[root@server1 ~]# npm -v                                          //查看版本
8.19.4
[root@server1 ~]# npm config set registry https://registry.npmmirror.com
[root@server1 ~]# npm install @vue/cli                     //安装vue
[root@server1 ~]# find / -name "vue"                    //查找
/root/vuehtm1000/node_modules/vue
/root/node_modules/vue
/root/node_modules/.bin/vue
/usr/local/bin/vue、
/usr/local/lib/node_modules/@vue/cli/node_modules/vue
[root@server1 ~]# ls -l /root/node_modules/.bin/vue
lrwxrwxrwx 1 root root 22 7月  31 14:41 /root/node_modules/.bin/vue -> ../@vue/cli/bin/vue.js
[root@server1 ~]# /root/node_modules/.bin/vue -V               //查看版本号
@vue/cli 5.0.8
[root@server1 ~]# /root/node_modules/.bin/vue create tdr_web                //创建vue前端项目

[root@server1 ~]# cd tdr_web/
[root@server1 tdr_web]# npm run serve

选择第三个

然后用空格选中下面的两个,一路回车

出现下面这个代表成功

[root@server1 tdr_web]# nohup npm run serve&

浏览器访问

[root@server1 tdr_web]# fg                //将后台作业切换到前台运行，fg命令的基本语法是 fg [作业编号]。作业编号是作业在后台运行时系统所分配的数字标识符。如果不指定作业编号，fg命令将切换到最近的后台作业。‌
nohup npm run serve
^C                              //使用ctrl+c退出
[root@server1 tdr_web]# fg
-bash: fg: 当前: 无此任务

[root@server1 tdr_web]# pwd
/root/tdr_web

使用samba共享

[root@server1 tdr_web]# yum -y install samba
[root@server1 tdr_web]# vim /etc/samba/smb.conf           //编写配置文件
[tdr_web]
        comment=tdr
        path=/root/tdr_web
        guest ok=no
        writable=yes

创建用户：
[root@server1 tdr_web]# useradd vueediter             //设置用户及密码
[root@server1 tdr_web]# smbpasswd -a vueediter
New SMB password:
Retype new SMB password:
Added user vueediter.

为该用户在文件夹中添加读写权限
[root@server1 tdr_web]# setfacl -m u:vueediter:rwx /root/tdr_web/
[root@server1 tdr_web]# systemctl restart nmb
[root@server1 tdr_web]# systemctl restart smb

去windows系统连接

使用nfs共享
//在public下创建几个目录
[root@server1 tdr_web]# mkdir public/img
[root@server1 tdr_web]# mkdir public/video
[root@server1 tdr_web]# mkdir public/music
[root@server1 tdr_web]# tree public/
public/
├── favicon.ico
├── img
├── index.html
├── music
└── video

3 directories, 2 files
[root@server1 tdr_web]# 

创建一台新机子
[root@server2 ~]# yum -y install rpcbind
[root@server2 ~]# yum -y install nfs-utils         //安装相关软件
[root@server2 ~]# vim /etc/exports         //修改配置文件
/static/img/ (*rw,sync)
[root@server2 ~]# mkdir -p /static/img            //创建共享目录
[root@server2 ~]# systemctl start rpcbind          
[root@server2 ~]# systemctl start nfs                   //重启服务
[root@server2 ~]# systemctl stop firewalld

回到server1
[root@server1 tdr_web]# yum -y install nfs-utils
[root@server1 tdr_web]# yum -y install rpcbind                //安装相关软件
[root@server1 tdr_web]# mount -t nfs 192.168.1.125:/static/img public/img/      //挂载server2端共享目录

测试:

去server2
[root@server2 ~]# cd /static/img/
[root@server2 img]# rz -E                  //放张图片进去
rz waiting to receive.

回到server1查看
[root@server1 tdr_web]# ls public/img/
tdr.png
[root@server1 tdr_web]# cd src
[root@server1 src]# ls
App.vue  assets  components  main.js  router  store  views
[root@server1 src]# cd components/
[root@server1 components]# ls
HelloWorld.vue
[root@server1 components]# cd ..
[root@server1 src]# cd views/
[root@server1 views]# ls
AboutView.vue  HomeView.vue
[root@server1 views]# vim src/views/HomeView.vue            //编写前端项目的主页文件
<template>
  <div class="home">
    <img alt="Vue logo" src="img/tdr.png">
    <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@server1 views]# cd ..
[root@server1 src]# cd ..
[root@server1 tdr_web]# npm run serve      //启动服务

浏览器访问：