__都非拉得的博客

Posted on 10 Nov 2021

前导

本文假定你对Js、Vue、Linux操作有初步了解。

说明

机器A: 本地机器, CentOS-Stream-8, Node:v14.18.1, Npm: 6.14.15
机器B: 远程服务器, CentOS7, Node: v10.14.2 Npm: 6.4.1
github或gitee账号
本地项目 /web/wwwroot/hello-world

步骤

本地要有一个项目并且这个项目已经推送到Github或者Gitee上了。

 $ cd /web/wwwroot/hello-world
 $ git init
 $ git add .
 $ git commit -m 'init'
 $ git remote add origin git@gitee.com:ioioj5/demo.git
 $ git push -u origin master

要有两台机器，一台本地，一台服务器，分别在这两台机器上生成sshkey，并把ssh公钥添加到Github或者Gitee上，使这两台机器有拉取和推送的权限。
配置本地机器免密码登录服务器，把本地机器生成的公钥（pub后缀的文件）追加到服务器的./ssh/authorized_keys文件中

本地机器
```
 $ cat ~/.ssh/id_ed25519.pub
 ssh-ed25519 ************** 你的邮箱
```
服务器
```
 $ echo "ssh-ed25519 ************** 你的邮箱" >> ~/.ssh/authorized_keys
```
然后，在本地机器上执行以下代码，测试以上设置是否生效, 是否可以免密码登录到服务器上。
```
 $ ssh root@服务器的IP地址
```
本地环境：node，npm，pm2，pushstate-server；服务器环境：node，npm，pm2.此处特别注意服务器中node、npm、pm2的环境变量，有可能出现找不到的情况，如找不到，直接软连接到/usr/local/bin目录下.
```
 $ npm install -g pushstate-server
 $ npm install -g pm2
```
注：如服务端的node、npm和pm2的安装目录是自定义的，请重新使用软连接链接到/usr/local/bin目录下.
```
 $ ln -s /web/soft/node/bin/npm /usr/local/bin/npm
 $ ln -s /web/soft/node/bin/node /usr/local/bin/node
 $ ln -s /web/soft/node/bin/pm2 /usr/local/bin/pm2
```

本地项目根目录下创建两个文件：server.js和ecosystem.config.js，配置信息可以根据需要自行修改，内容如下：

server.js

启动脚本

 const server = require("pushstate-server")

 server.start({
     port: 8888, // 需要启动的端口号
     directory: "./dist" // index.html 所在的目录路径，这里直接写相对路径就好。
 })

ecosystem.config.js

 module.exports = {
     apps: [
         {
             name: 'vue-demo',
             script: 'server.js'
         },
     ],
     deploy: {
         production: {
             user: 'root', // 服务器账号
             host: '***.***.***.***', // 服务器IP
             ref: 'origin/master', // 要拉取代码的分支
             repo: 'git@gitee.com:ioioj5/vue_demo.git', // 代码仓库地址
             path: '/web/www/vue-demo', // 代码存放在服务器端的位置
             // 在服务器上执行的命令
             'post-deploy': 'git reset --hard && git checkout master && git pull && npm i --production=false && npm run build && pm2 startOrReload ecosystem.config.js',
             env: {
                  NODE_ENV: 'production'
             }
         }
     }
 }

部署

以下操作在本地机器执行。需注意，在执行部署前，需要把本地项目的代码都提交到远程仓库中（服务端部署时，会拉取master分支最新的代码）。

 // 首次执行，初始化项目；执行完成后，注意观察服务端/web/www目录下有没有vue_demo
 $ pm2 deploy ecosystem.config.js production setup

 // 自动化执行整个流程
 $ pm2 deploy production

前导

说明

步骤

Related Posts