一、虛擬機(jī)安裝
1.vmware下載

2.鏡像下載
3.Ubuntu
4.新建虛擬機(jī)





一直點(diǎn)下一步，直到點(diǎn)擊完成。
5.分配鏡像


二、Gitlab CI/CD 自動(dòng)化部署項(xiàng)目
1.配置GitLab CI/CD：

		A.在你的Vue.js項(xiàng)目中，創(chuàng)建一個(gè)名為`.gitlab-ci.yml`的文件，放在項(xiàng)目根目錄下。

		B.在該文件中定義CI/CD的階段、作業(yè)和腳本。

stages:
  - build
  - deploy

build:
  stage: build
  image: node:14  # 使用Node.js 14.x版本鏡像
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
      - dist/

deploy:
  stage: deploy
  script:
    - 'which ssh-agent || ( apk add --update openssh )'  # 安裝SSH代理（如果沒有的話）
    - eval $(ssh-agent -s)  # 啟動(dòng)SSH代理
    - echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add -  # 添加SSH私鑰
    - ssh -o StrictHostKeyChecking=no user@server 'mkdir -p /path/to/deploy'
    - scp -r dist/* user@server:/path/to/deploy
  only:
    - master

2.生成SSH密鑰對：
如果尚未生成，請?jiān)诒镜貦C(jī)器上生成一個(gè)SSH密鑰對：

ssh-keygen -t rsa -b 4096 -f \~/.ssh/id_rsa_vue_deploy

將公鑰(\~/.ssh/id_rsa_vue_deploy.pub)添加到服務(wù)器的授權(quán)密鑰中。

3.將SSH私鑰添加到GitLab：

進(jìn)入GitLab中的項(xiàng)目頁面。
轉(zhuǎn)到 "設(shè)置" > "CI / CD"，展開 "變量" 部分。
添加一個(gè)名為 SSH_PRIVATE_KEY 的變量，并將 \~/.ssh/id_rsa_vue_deploy 文件的內(nèi)容粘貼到值中。

4.更新GitLab CI/CD配置：

更新 .gitlab-ci.yml 文件，引用正確的私鑰變量：

deploy:
  stage: deploy
  script:
    - 'which ssh-agent || ( apk add --update openssh )'
    - eval $(ssh-agent -s)
    - echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add -
    - ssh -o StrictHostKeyChecking=no -i \~/.ssh/id_rsa_vue_deploy user@server 'mkdir -p /path/to/deploy'
    - scp -r dist/* -i \~/.ssh/id_rsa_vue_deploy user@server:/path/to/deploy
  only:
    - master

5.提交和推送更改：

將更改提交到你的項(xiàng)目并推送到GitLab。
現(xiàn)在，每當(dāng)你將更改推送到 master 分支時(shí)，GitLab CI/CD將自動(dòng)觸發(fā)構(gòu)建和部署階段，將Vue.js項(xiàng)目部署到指定的服務(wù)器上。確保根據(jù)你的具體服務(wù)器詳情和要求調(diào)整配置。

三、給虛擬機(jī)配置ssh服務(wù)端
1.虛擬機(jī)的網(wǎng)絡(luò)適配器選擇 橋接模式

2.在虛擬機(jī)上安裝SSH服務(wù)器

sudo apt update
sudo apt install openssh-server

3.本地生成SSH密鑰對

ssh-keygen

4.本地將公鑰(~/.ssh/id_rsa_vue_deploy.pub)添加到服務(wù)器的授權(quán)密鑰中

ssh-copy-id user@server_ip

5.本地測試SSH連接：

ssh user@server_ip

6.設(shè)置CI/CD變量–值為私鑰

四、GitLab Runner安裝與注冊
1.添加GitLab官方存儲(chǔ)庫：

curl -L https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.deb.sh | sudo bash

2.安裝GitLab Runner

sudo apt update
sudo apt install gitlab-runner

3.注冊Runner

sudo gitlab-runner register

4.輸入您的GitLab實(shí)例URL

 Please enter the gitlab-ci coordinator URL (e.g. https://gitlab.com )
 https://gitlab.com

5.輸入您獲得的令牌以注冊Runner

Please enter the gitlab-ci token for this runner:
 xxx

6.輸入對這個(gè)Runner的描述

Please enter the gitlab-ci description for this runner
test

7.輸入Runner的tag

Please enter the gitlab-ci tags for this runner (comma separated):
test 

8.輸入Runner執(zhí)行程序

Please enter the executor: ssh, docker+machine, docker-ssh+machine, kubernetes, docker, parallels, virtualbox, docker-ssh, shell:
shell

9.服務(wù)端安裝nodejs

//使用NodeSource存儲(chǔ)庫安裝Node.j
curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
//安裝Node.js
sudo apt update
sudo apt install -y nodejs
//驗(yàn)證安裝
node -v
npm -v

10.在gitlab上查看runner和流水線


五、配置nginx
1.安裝nginx

sudo apt install nginx
//驗(yàn)證安裝:在瀏覽器中輸入 http://localhost 或 http://127.0.0.1

2.在/etc/nginx/conf.d目錄下，新增nginx配置文件

server {
    listen       80;
    # 域名，多個(gè)以空格分開
    server_name  172.18.18.87;

    location / {
        root   /path/to/deploy/dist;
        index  index.html index.htm;
    }
}

六、視頻可參考文章來源地址http://www.zghlxwxcb.cn/news/detail-839231.html

到了這里，關(guān)于Gitlab CI/CD 自動(dòng)化打包部署前端（vue）項(xiàng)目的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！