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

叁歲伎倆 2023-10-04 20:20 56阅读 0赞

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

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

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

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

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

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

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

![0bb8cb812b80475e8cf19f3c82c93000.png][]

内容如下：

# 用于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

然后到项目的settings添加secrets，用于工作流里面的账号信息：

![dcf9384bf7274e4eb73a2d3cf719d1dd.png][]

添加如下内容：

DOCKER\_USERNAME：[Docker Hub][] 的账号，没有的话要注册哦

DOCKER\_PASSWORD：[Docker Hub][] 的密码

DOCKER\_REPOSITORY：[Docker Hub][] 存储镜像的仓库名称

USERNAME：服务器用户名

PASSWORD：服务器密码

SERVER\_IP：服务器地址，默认使用了22端口

![e650d96ea57e4f568600ab07cf5121cf.png][]

填写好之后，就可以直接push一下了，然后到action里面看一下：绿色就表示成功了

![244eeb87997a4537abfc44c70db9f960.png][] 然后到服务器上看一下：可以看到容器和服务都起来了

![25ecf265339a45b5b8c3f4fee8333f3f.png][]

然后访问一下服务器地址:9090端口，就可以看到我们的项目了：如果访问不了，就要看一下你服务器的9090端口是否放开了

![338827bff55b4fe9ae2e6d60540eecac.png][]

当然有时候，部署不是一次就成功的：我也是出错了好几次，然后针对每次错误，看一下日志，根据具体的错误找到解决办法：

![bbc143c816ca4a75933ccc115d165a51.png][]

比如这次![7c4d3b72cfab4e43a96685918ab1e889.png][]

我就怀疑是没有打包成功，没有build成功，那为啥会build不成功呢，开始一步一步的注释Dockerfile里面的步骤，找到原因，然后修改，然后重新提交 。不要气馁，详细你会弄好的

[docker_vue_dockerhub_1024_-CSDN]: https://xiaoshen.blog.csdn.net/article/details/128253416
[github_pages_action_vue_1024_-CSDN]: https://xiaoshen.blog.csdn.net/article/details/128307715
[0bb8cb812b80475e8cf19f3c82c93000.png]: https://img-blog.csdnimg.cn/0bb8cb812b80475e8cf19f3c82c93000.png
[dcf9384bf7274e4eb73a2d3cf719d1dd.png]: https://img-blog.csdnimg.cn/dcf9384bf7274e4eb73a2d3cf719d1dd.png
[Docker Hub]: https://hub.docker.com/
[e650d96ea57e4f568600ab07cf5121cf.png]: https://img-blog.csdnimg.cn/e650d96ea57e4f568600ab07cf5121cf.png
[244eeb87997a4537abfc44c70db9f960.png]: https://img-blog.csdnimg.cn/244eeb87997a4537abfc44c70db9f960.png
[25ecf265339a45b5b8c3f4fee8333f3f.png]: https://img-blog.csdnimg.cn/25ecf265339a45b5b8c3f4fee8333f3f.png
[338827bff55b4fe9ae2e6d60540eecac.png]: https://img-blog.csdnimg.cn/338827bff55b4fe9ae2e6d60540eecac.png
[bbc143c816ca4a75933ccc115d165a51.png]: https://img-blog.csdnimg.cn/bbc143c816ca4a75933ccc115d165a51.png
[7c4d3b72cfab4e43a96685918ab1e889.png]: https://img-blog.csdnimg.cn/7c4d3b72cfab4e43a96685918ab1e889.png