前端自动化部署实战：从购买服务器到 CI/CD 落地🚀🚀🚀

Mose前端
34 阅读5分钟

前言

相信不少前端小伙伴都抱着 “部署是运维大佬的活，我只管写页面敲代码” 的想法，遇到项目上线就秒变 “伸手党”，要么等运维配置，要么卡壳在各种部署问题上干瞪眼。但是想从 “初级前端” 卷成 “高级前端”，部署这块技能板必须焊死。尤其是中小公司，很多新项目的部署配置需要前端自己上手搞定。这篇文章将为大家介绍前端自动化部署，从购买服务器到项目CICD自动部署。

服务器的选择

本文主要做教学演示使用，购买的腾讯云服务器，仅供参考哈！！！

image.png

点击购买，选择对应的镜像支付就好了，镜像可以任意选择，后续可以重装操作系统。本文选择的是宝塔linux可视化面板，方便管理。

image.png

服务器配置

购买结束后，就可以在腾讯控制台看到服务器了，ip地址就是我们的服务器地址，点击登录按钮登录服务器

image.png

进入到宝塔面板，我们配置防火墙，配置可以通过的端口，要不会出现访问失败的情况，8888是宝塔默认端口, 额外注意：后续创建新端口项目，一定要在这开启端口配置

image.png

这样我们通过 ip:8888就可以访问宝塔面板了，点击文件，在服务器新建项目文件夹，比如说demo文件夹，可以针对不同项目创建不同文件夹, 通过端口区分不同项目

image.png

接下来我们安装nginx，这个是必须的，我们点击软件商店搜索安装就行

image.png

接下就是建站，点击网站，添加项目，创建我们的项目

绑定域名配置项，如果没有域名可以填写服务器IP,可以配合端口号区分不同项目，然后选择我们的项目根目录，这样我们网站和文件就关联起来了

image.png

当然如果我们选错也没关系，点击设置，修改nginx配置，比如说root路径和项目绑定的地址

image.png

修改完 Nginx配置后，一定要进行重载配置，否则配置不生效

image.png

这样我们建站就成功啦，最后，我们只需在demo文件夹中上传index.html测试文件，通过服务器的IP地址就可以访问到当前index.html测试文件了，vue项目的build后的dist文件同样如此

当然，我们也可以通过命令行执行 scp -r dist/* root@IP:/www/wwwroot/demo/上传自己的打包文件

这里需要注意的是，测试阶段可以上传完文件后，如果访问页面不生效，可以去宝塔平台看看，重点关注是不是自己nginx中root路径配置有误

CICD 部署

前面我们是通过手动上传文件，把本地代码部署到服务器上的。虽然能用，但实际操作下来，感觉这个方法特别费事儿。每次代码一更新，都得重新打包、上传、登录服务器操作一遍，既浪费时间，又容易出错。尤其是多人一起协作的时候，手动操作带来的问题更明显。

所以，接下来我们要升级一下，摆脱手动部署的繁琐，搭建一套前端的自动化 CI/CD 流程。做到代码一提交，服务器自动完成构建和部署

首先登录服务器，执行

ssh-keygen -t rsa -b 4096 -C "github-actions" -f ~/.ssh/github_deploy_key

生成公钥和私钥，然后执行

cat ~/.ssh/github_deploy_key.pub >> ~/.ssh/authorized_keys

将公钥添加到服务器authorized_keys文件中，然后执行下面命令，添加文件权限

chmod 600 ~/.ssh/authorized_keys

最后我们通过cat ~/.ssh/github_deploy_key查看私钥，拷贝私钥要github项目中，本文以github为例,我们添加secret信息，包括服务器IP:SERVER_IP、 服务器用户：SERVER_USER，SSH私钥：SSH_PRIVATE_KRY

image.png

然后我们进到项目的根目录，.github/workflows/deploy.yml创建deploy.yml文件夹，内容如下

name: Deploy Vue App on push to master

on:
  push:
    branches:
      - master

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Setup Node.js 20
        uses: actions/setup-node@v3
        with:
          node-version: '20'

      - name: Install dependencies
        run: npm install

      - name: Build project
        run: npm run build

      - name: Clean remote directory
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SERVER_IP }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          script: |
            rm -rf /www/wwwroot/vue-app/*

      - name: Upload dist to server
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.SERVER_IP }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          source: "dist/*"
          target: "/www/wwwroot/vue-app/"

      - name: Reload nginx
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SERVER_IP }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          script: nginx -s reload

这个配置也很容易看明白，监听master分支，只要往master分支push代码，就会触发工作流的执行，克隆最新代码，指定node版本，执行npm install和npm run build, 清空远程文件夹，然后进行上传，最后重启nginx服务

我们给master提交新代码，可以看到有新的流水线在执行了，执行结束后，我们访问服务器地址，就可以看到我们的部署成功了

image.png

image.png 接下来我们就可以放手去写业务了，每次上线合并到master，会自动触发流水线，执行相应的部署任务

总结

通过上述讲解，相信你对项目CICD部署有了清晰的了解，快去试试吧，原创不易，如果对比有帮助，帮忙点赞、收藏、关注~

avatar
文章
阅读
粉丝