通过gitlab实现自动部署前端项目到服务器

前言

在日常的开发中，我们经常会遇到需要部署前端项目到服务器的情况，比如发布新版本、更新功能等。一般情况下，我们需要手动将代码上传到服务器，然后手动执行部署命令，这显然是非常麻烦的。因此，我们需要找到一种自动化的方法来实现部署，这样就可以大大节省我们的部署时间。

方案

采用gitlab-runner + docker + 自动化部署脚本

准备工作

安装docker,gitlab,gitlab-runner可以参考下面的文章

安装配置gitlab-ce-点击查看
安装GitLab Runner-点击查看

自动化部署脚本

我们可以编写一个自动化部署脚本，在gitlab-runner中执行，将前端项目编译成dist目录，然后将dist目录同步到发布服务器的指定目录，实现自动部署。
通过 GitLab CI/CD 来实现自动打包及发布。你需要在你的项目根目录下创建一个 .gitlab-ci.yml 文件，然后在这个文件中定义一个 job 来将 dist 目录同步到发布服务器的指定目录。

这是一个 .gitlab-ci.yml 文件的示例：

stages:
  - build
  - deploy

build:
  stage: build
  image: node:${NODE_VERSION}
  cache:
    paths:
      - node_modules/
  script:
    - yarn install --frozen-lockfile
    - yarn build
  artifacts:
    paths:
      - dist/

deploy:
  stage: deploy
  image: alpine:latest
  before_script:
    - apk add --no-cache openssh-client
    - eval $(ssh-agent -s)
    - echo "Debugging SSH key..."
    - mkdir -p ~/.ssh
    - chmod 700 ~/.ssh
    - echo "$SSH_PRIVATE_KEY" | base64 -d > ~/.ssh/id_rsa
    - chmod 600 ~/.ssh/id_rsa
    - echo "SSH key file content (first and last lines):"
    - head -n 1 ~/.ssh/id_rsa
    - tail -n 1 ~/.ssh/id_rsa
  script:
    - ssh-add ~/.ssh/id_rsa || (echo "Failed to add SSH key" && exit 1)
    - ssh-add -l
    - ssh-keygen -lf ~/.ssh/id_rsa || echo "Failed to show key fingerprint"
    - ssh-keyscan $SERVER_IP>> ~/.ssh/known_hosts
    - chmod 644 ~/.ssh/known_hosts
    - scp -v -r dist/* $SERVER_USER@$SERVER_IP:$REMOTE_DIR
  only:
    - main
variables:
  NODE_VERSION: "16.14.2"
  SERVER_IP: "发布服务器IP"
  SERVER_USER: "发布服务器用户名"
  REMOTE_DIR: "发布目录"
  SSH_PRIVATE_KEY: "SSH私钥(BASE64编码)"

如果服务器的ssh端口不是22，比如端口改成了37582，我们需要按照下面的模板修改：

stages:
  - build
  - deploy

build:
  stage: build
  image: node:${NODE_VERSION}
  cache:
    paths:
      - node_modules/
  script:
    - yarn install --frozen-lockfile
    - yarn build
  artifacts:
    paths:
      - dist/

deploy:
  stage: deploy
  image: alpine:latest
  before_script:
    - apk add --no-cache openssh-client
    - eval $(ssh-agent -s)
    - echo "Debugging SSH key..."
    - mkdir -p ~/.ssh
    - chmod 700 ~/.ssh
    - echo "$SSH_PRIVATE_KEY" | base64 -d > ~/.ssh/id_rsa
    - chmod 600 ~/.ssh/id_rsa
    - echo "SSH key file content (first and last lines):"
    - head -n 1 ~/.ssh/id_rsa
    - tail -n 1 ~/.ssh/id_rsa
    - echo -e "Host $SERVER_IP\n\tPort 37582" > ~/.ssh/config
    - chmod 600 ~/.ssh/config
  script:
    - ssh-add ~/.ssh/id_rsa || (echo "Failed to add SSH key" && exit 1)
    - ssh-add -l
    - ssh-keygen -lf ~/.ssh/id_rsa || echo "Failed to show key fingerprint"
    - ssh-keyscan -p 37582 $SERVER_IP >> ~/.ssh/known_hosts
    - chmod 644 ~/.ssh/known_hosts
    - scp -v -P 37582 -r dist/* $SERVER_USER@$SERVER_IP:$REMOTE_DIR
    - ssh -vv $SERVER_USER@$SERVER_IP "echo 'SSH connection successful'"
  only:
   - main
variables:
  NODE_VERSION: "16.14.2"
  SERVER_IP: "发布服务器IP"
  SERVER_USER: "发布服务器用户名"
  REMOTE_DIR: "发布目录"
  SSH_PRIVATE_KEY: "SSH私钥(BASE64编码)"

注意：如果按照上面的配置，前面的步骤都是没有问题，但是执行最后一步退出了，可能是因为没有开启ssh密钥登录

你需要修改这个文件中的以下部分：

NODE_VERSION:你想使用的 Node.js 版本，与你的开发环境一致，可用 node -v 命令查看
SERVER_IP:你要部署到的服务器的 IP 地址
SERVER_USER:你要部署到的服务器的用户名
REMOTE_DIR:你要部署到的服务器的目录
SSH_PRIVATE_KEY:你的 SSH 私钥，需要用 base64 编码，可用 cat ~/.ssh/id_rsa | base64 命令获取
main:你想部署的分支（这里是 main 分支）

遇到的问题：

aws默认的用户不是root,这个时候用root登录上传会提示权限不足，需要修改一下登录的用户名。
比如当前登录的用户是ubuntu，而我们的发布目录所有者是root，那么我们需要修改一下发布目录的权限。.gitlab-ci.yml 文件中，SERVER_USER也需要更改成ubuntu。

1	`sudo chown -R ubuntu:ubuntu path/to/your/project`

生成SSH公钥

1.生成 SSH 密钥对：您可以在以下任意位置生成 SSH 密钥对：

您的本地机器（个人计算机）
目标服务器

如果您对 SSH 密钥管理感到舒适，在本地机器上生成可能更方便。如果您更喜欢直接在目标环境中操作，可以在目标服务器上生成。

2.无论您在哪里生成密钥，请确保：

私钥（base64 编码后）被添加到 GitLab CI/CD 变量中
公钥被添加到目标服务器的 ~/.ssh/authorized_keys 文件中

我在目标服务器上生成 SSH 密钥对：
1.登录到目标服务器，然后运行：

1	`ssh-keygen -t rsa -b 4096 -C "deploy_key" -f ~/.ssh/gitlab_deploy_key`

2.将公钥添加到授权键文件中。仍在目标服务器上，运行：

1	`cat ~/.ssh/gitlab_deploy_key.pub >> ~/.ssh/authorized_keys`

3.获取私钥并转换为 base64。仍在目标服务器上，运行：

1	`cat ~/.ssh/gitlab_deploy_key \| base64 -w 0`

复制输出的 base64 编码字符串。

注意：如果您使用的是 OpenSSH 格式的私钥（以 “—–BEGIN OPENSSH PRIVATE KEY—–” 开头），可能需要转换为 RSA 格式
ssh-keygen -p -m PEM -f ~/.ssh/gitlab_deploy_key

4.更新 GitLab CI/CD 变量(可选)：

在 GitLab 项目中，转到 Settings > CI/CD > Variables
- 更新 SSH_PRIVATE_KEY 变量：
- Value: 粘贴您刚刚生成的 base64 编码字符串
- Type: Variable (不是 File)

5.使用之前提供的 CI/CD 配置文件。(可选)

第4,5步是我写的是可选，因为我在设置环境变量后，运行脚本一直无法获取到私钥，懒得折腾，直接把变量写到本地文件中了。

运行脚本

在配置好runner后，我们可以直接在gitlab上push代码，gitlab-runner会自动执行CI/CD脚本，将前端项目编译成dist目录，然后将dist目录同步到发布服务器的指定目录，实现自动部署。

总结

通过gitlab-runner + docker + 自动化部署脚本，我们可以实现自动化部署前端项目到服务器，大大节省了我们的部署时间。
上面的脚本要根据实际情况来调整，我的环境用的是yarn，如果用npm，需要修改脚本中的命令。

赏

支付宝打赏

微信打赏

如果文章对你有帮助，欢迎点击上方按钮打赏作者，更多功能请访问博客站

工具分享技术分享

#docker #gitlab-ce #技术分享 #宝塔 #gitlab-runner #项目部署 #自动化部署 #前端项目

通过gitlab实现自动部署前端项目到服务器

https://blog.fxcxy.com/2024/08/28/通过gitlab实现自动部署前端项目到服务器/

作者

spatacus

发布于

2024年8月28日

许可协议

如何在AWS的s3存储桶上部署前端项目及通过CloudFront加速访问上一篇

通过gitlab实现自动部署前端项目到AWS S3 下一篇