从零开始部署一个 vue 项目

服务器

购买服务器

服务器选择国内的有想阿里云、腾讯云，国外的有如 vultr 等
购买香港节点（域名不需要备案）
系统选择的是 CentOS 8，或者其它系统

域名解析

这个域名在哪接入的就在那个地方做解析就可以了，可以添加一条 A 记录，让域名解析到你所购买的服务器

远程登录服务器

ssh <服务器账号名，一般是root>@<服务器ip地址或者域名（解析到当前服务器）>

SSH 免密登陆

www.ruanyifeng.com/blog/2011/1…
客户端操作
- 使用 scp 的时候路径中不能有中文！

# 本地生成密钥对
cd C:\Users\Administrator\.ssh
# 客户端生成公钥和私钥的命令
ssh-keygen

# 把公钥拷贝到服务器
scp nllcoder_com_rsa.pub root@nllcoder.com:/root/.ssh

客户端操作---修改本机的 .ssh/config 文件 C:\Users\Administrator\.ssh\config

Host nllcoder.com // 别名
HostName nllcoder.com // 主机名
User root // 用户名
PreferredAuthentications publickey
IdentityFile C:\Users\Administrator\.ssh\nllcoder_com_rsa

服务器

cd ~/.ssh
# 找到 authorized_keys 文件
# 把 nllcoder_com_rsa.pub 文件内容追加到 authorized_keys 文件末尾
cat >> authorized_keys < nllcoder_com_rsa.pub

服务器环境配置

使用 nvm 安装 Node.js [https://github.com/nvm-sh/nvm](https://github.com/nvm-sh/nvm)

# 查看环境变量
echo $PATH

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

# 重新连接 ssh
nvm --version

# 安装 Node.js lts
nvm install --lts

# 查看环境变量
echo $PATH

安装 pm2

npm i pm2 -g

pm2 log xx 查看出错日志

部署 Vue.js 项目

www.bt.cn

安装 Nginx

yum install nginx

which nginx
nginx -v

# 启动 Nginx
nginx
nginx -s reload
nginx -s stop

# 检查配置文件是否 ok
nginx -t

Nginx 配置

备份配置文件
- cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.backup
修改配置文件路径
- vim /etc/nginx/nginx.conf
当配置文件修改之后，要重启 nginx ！！！！！！！！！！
查看错误日志
- cat /var/log/nginx/error.log

部署 Vue.js 项目 - Node.js

查看运行 nginx 进程的账号

ps aux | grep nginx

chown nginx:nginx -R /home/www

Github actions 部署

安装 git

yum install git

name: Publish And Deploy Demo
on:
  push:
    branches:    
      - master

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    # 部署到服务器
    - name: Deploy
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.HOST }}
        username: ${{ secrets.USERNAME }}
        password: ${{ secrets.PASSWORD }}
        port: ${{ secrets.PORT }}
        debug: true
        script: |
          cd /tmp
          git clone http://github.com/goddlts/vue-deploy-demo.git
          cd /tmp/vue-deploy-demo
          chmod +x ./deploy.sh
          ./deploy.sh

deploy.sh

#!/bin/bash

# 安装依赖
npm install
# 打包 
npm run build
# 删除 ngnix 指向的文件夹下得文件
rm -rf /home/www/*

# 将打包好的文件复制过去
mv /tmp/vue-deploy-demo/dist/*  /home/www
# 删除 clone 的代码
rm -rf /tmp/vue-deploy-demo

如果 nginx 启动失败，查看错误日志，权限问题，使用下面方式解决

# 查看错误日志
cat /var/log/nginx/error.log
cd /home/www
# 更改 www 目录的所有者
chown nginx:nginx -R .

部署 Nuxt.js 项目

手工部署

baseURL: conduit.productionready.io
.nuxt
static
nuxt.config.js
package.json
package-lock.json
pm2.config.json

# 服务器 home 下创建 realworld 文件夹
mkdir realworld

# 本地运行， 注意 scp 命令使用的时候，路径中不能有中文！！！！！！！！！！！！！
scp ./release.zip root@47.242.35.65:/home/realworld

cd realworld

# 安装 unzip
yum install unzip

# 服务器上解压
unzip release.zip

# 查看隐藏目录
ls -a

# 安装依赖
npm i

# npm run start
pm2 start pm2.config.json

pm2 stop xxxx

pm2 log RealWorld

服务器开放端口 - 3000、80

到服务器防火墙里面添加安全组规则，放行相应端口

自动部署

Github Actions

创建远程仓库
个人设置-Developer settings-Personal access tokens
- ```
e0ff11544b8eb0e101e4defa470527b6d92d9c53  
```
项目设置-Secrets

git tag v0.1.0
git push origin v0.1.0