从打包到部署前端项目

1. 服务器增加nginx配置文件

vim /etc/nginx/conf.d/site.conf

内容如下：

server {
    listen 80;
    listen [::]:80;
    server_name xxx;  # 域名或ip

    
    location / {
        alias /root/data/www/site/dist/; # 打包后上传到服务器的目录
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

完成后，保存退出，执行命令

// 验证配置文件是否正确
nginx -t
// 修改后执行命令
sudo nginx -s reload 
// 重启ng
sudo systemctl restart nginx

2. 使用Github Actions自动化

在 Github>Settings>secrets and variables>Actions>new repository secrets 新建密钥SSH_PRIVATE_KEY，环境变量REMOTE_HOST等，

打包完成后

easingthemes/ssh-deploy上传打包目录dist到服务器

完整配置如下

name: CI

on:
  push:
    branches: [ "main" ]
 

jobs:
  build-and-deploy:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [18.x]
        
    steps:
      - name: Checkout 😘
        uses: actions/checkout@v3

      - name: Setup pnpm 😊
        uses: pnpm/action-setup@v2
        with:
          version: 8

      - name: Setup Node.js ${{ matrix.node-version }} 😁
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'pnpm'

      - name: Install and Build 😍
        run: |
          pnpm install
          pnpm build
      - name: ssh deploy 👌
        uses: easingthemes/ssh-deploy@v5.0.0
        with:
          # 配置 私钥 
          SSH_PRIVATE_KEY: ${{secrets.SSH_PRIVATE_KEY}}
          # 服务器ip
          REMOTE_HOST: ${{secrets.REMOTE_HOST}}
          REMOTE_USER: root
          # 前端打包后的目录
          SOURCE: dist 
          # 服务器的目录
          TARGET: /root/data/www/site