vue使用docker+node+nginx+linux自动化部署

news2024/11/25 20:55:36

假定你已经有一个vue项目了，并且已经用github进行管理了，

假定你还有一台免费的linux服务器，想用自动化部署的方式解放双手，

假定你已经了解dockerhub使用，想玩转docker容器：docker构建vue项目镜像并发布到dockerhub中使用_1024小神的博客-CSDN博客

假定你已经熟悉了github的action怎么用，想用于自动化部署：

使用github的pages配合action自动部署vue项目_1024小神的博客-CSDN博客

那么，你来对地方了，哈哈哈哈哈哈，1024小神欢迎您

首先看一下你本地的vue项目，创建一个Dockerfile文件：

内容如下：

# 用于build编译
FROM node:14.18
COPY ./ /app
WORKDIR /app
RUN npm install
RUN npm run build

# 用于发布到nginx
FROM nginx:stable-alpine
RUN rm /etc/nginx/conf.d/default.conf
ADD default.conf /etc/nginx/conf.d/
COPY --from=0 /app/dist/ /usr/share/nginx/html/

然后再创建一个default.conf文件，用于nginx服务用的：

server {
    listen       80;
    server_name  localhost; # 修改为docker服务宿主机的ip

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

再创建一个.github\workflows\deplayServer.yml文件，用于github的action的：

# # 1发布项目到自己的服务器上的配置
# name: DeployServer
# # on 表示触发actions的条件
# on:
#     push:
#         branches: [main] #main分支在push的时候会触发
#     pull_request:
#         branches: [main] #main分支在PR的时候会触发

# jobs:
#     build:
#         runs-on: ubuntu-latest #nodejs执行的操作系统

#         steps:
#             - uses: actions/checkout@v3 #拉取你的最新代码
#             - name: Use Node.js
#               uses: actions/setup-node@v3
#               with:
#                   node-version: "14.x"
#             - run: npm install
#             - run: npm run build
#             - name: TranslateFile
#               # uses: wangyucode/sftp-upload-action@24f8bb83383dc39bed201ee5da01475e6c38c568
#               uses: wangyucode/sftp-upload-action@v1.1
#               with:
#                   host: ${{ secrets.SERVER_IP }} #你的nginx服务器公网ip
#                   port: ${{ secrets.SERVER_PORT }} #你的nginx服务器ssh端口
#                   username: ${{ secrets.USERNAME }} #你的nginx服务器用户名
#                   password: ${{ secrets.PASSWORD }} #你的nginx服务器密码
#                   localDir: "dist" #你vue项目build好的文件的路径,每次服务器上会自动删除对应的文件夹后重新覆盖
#                   remoteDir: ${{ secrets.SERVER_DESTINATION }} #你要把你build好的文件夹放到nginx服务器上的什么位置

# # 2以下是构建vue项目发布到githubpages上的配置
# name: DeployGitpages

# on:
#     push:
#         branches:
#             - main # 这里只配置了main分支，所以只有推送main分支才会触发以下任务
# jobs:
#     build-and-deploy:
#         runs-on: ubuntu-latest
#         steps:
#             - uses: actions/checkout@v3
#             - name: Use Node.js
#               uses: actions/setup-node@v3
#               with:
#                   node-version: "14.x"
#             - run: node -v
#             - run: npm install
#             - run: npm run build
#             - name: Deploy # 部署
#               uses: JamesIves/github-pages-deploy-action@v4.3.3
#               with:
#                   branch: gh-pages # 部署后提交到那个分支
#                   folder: dist # 这里填打包好的目录名称

# 3以下是用docker部署项目到自己的服务器的配置
name: deplayDocker
# 触发条件为 push
on: [push] # 执行时机
# 任务
jobs:
    build-and-deploy:
        # 运行的环境
        runs-on: ubuntu-latest
        # 步骤
        steps:
            - uses: actions/checkout@v3 # git pull
            - name: Use Node.js
              uses: actions/setup-node@v3
              with:
                  node-version: 14
            - name: Docker Hub
              run: |
                  docker login -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}
                  docker build -t cvreport-image  .
                  docker tag cvreport-image ${{ secrets.DOCKER_USERNAME }}/${{ secrets.DOCKER_REPOSITORY }}:latest
                  docker push ${{ secrets.DOCKER_USERNAME }}/${{ secrets.DOCKER_REPOSITORY }}:latest

            - name: LoginServer
              uses: appleboy/ssh-action@master
              with:
                  host: ${{ secrets.SERVER_IP }}
                  username: ${{ secrets.USERNAME }}
                  password: ${{ secrets.PASSWORD }}
                  script: |
                      docker stop cvpod
                      docker rm cvpod
                      docker rmi ${{ secrets.DOCKER_USERNAME }}/${{ secrets.DOCKER_REPOSITORY }}:latest
                      docker pull ${{ secrets.DOCKER_USERNAME }}/${{ secrets.DOCKER_REPOSITORY }}:latest
                      docker run -d -p 9090:80 --name cvpod ${{ secrets.DOCKER_USERNAME }}/${{ secrets.DOCKER_REPOSITORY }}:latest