提前准备

github 创建新空项目

这里大家应该都会，不做讲解了。

配置`action secrets`

注意 secret 的 name 需要和下方 vue 项目中配置的 workflows 中的 docker.yml 中的 name 一致

购买服务器

这里大家自行选择

服务器安装 git node 环境

yum install git
yum install nodejs

或者通过阿里云上面的例子先安装 git nvm

服务器安装 docker

服务器安装 docker 有很多方法，简单介绍两种

通过宝塔面板傻瓜式安装
docker 官方提供方法

创建 vue 项目

创建 vue 项目这里就不过多介绍了，就此略过。

vue 配置 docker

创建 `default.conf` 配置

vue 项目根目录创建 default.conf 配置 nginx

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

创建 Dockerfile

vue 项目根目录创建 Dockerfile

FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY ./default.conf /etc/nginx/conf.d/default.conf

配置 github workflow

vue 根目录创建 .github 文件夹
在 .github 文件夹下创建 workflows 文件夹
在 workflows 文件夹下创建 docker.yml

docker.yml 内容

name: docker

on:
  push:
    branches: [master] # master 分支有 push 时触发

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: SSH
        uses: appleboy/ssh-action@master
        with:
          host: xxx.x.xxx.xxx # 服务器 ip
          username: root
          password: ${{ secrets.PASSWORD }}
          port: 22
          script: |
             cd /home/auto-answer-frontend/ 
             git pull
             docker stop auto-answer-frontend
             docker rm auto-answer-frontend
             docker rmi auto-answer-frontend
             docker build -t auto-answer-frontend .
             docker run -p 3000:80 -d --name auto-answer-frontend auto-answer-frontend

cd /home/auto-answer-frontend/进入服务器 vue 项目
git pull拉取 github 最新代码
docker stop auto-answer-frontend 停止原有的 docker 容器
docker rm auto-answer-frontend docker rmi auto-answer-frontend 删除容器和镜像
docker build -t auto-answer-frontend .将 vue 项目打包成镜像
docker run -p 3000:80 -d --name auto-answer-frontend auto-answer-frontend 运行打包后的镜像

推送代码到 github

这里需要注意：由于我这里没找到怎么在远程自动化打包 vue 项目方法，这里的笨解决办法是现在本都打包，打包后把 dist 目录也上传到 github 上。

服务器拉取代码

在之前的准备阶段已经在服务器上安装了 git 相关，这里只需要登录服务器进入 /home 目录（这个目录需要和 vue 项目中配置的项目路径一致），然后拉取 github 代码

配置好上述代码之后，后续推送代码需要 build 下推送，然后就会发现通过 github action 会自动打包到服务器并生成镜像运行了~

Vue + Docker 项目部署服务器记录