『壹』 在自己搭建的gitlab中，能部署用戶可訪問的前端打包文件嗎
不知道 自建的gitLab 是否有 pages服務，
但是你既然有自己的伺服器，應該是可以通過 Nginx 配置 ，將路徑映射到你打包後的目錄中去。這個是可以實現的
nginx 靜態文件伺服器的配置請網路。
『貳』 gitLab CI/CD docker自動部署vue前端項目
查詢了好多資料，都沒有找到可以直接應用的，綜合了好多，配置runner之後，前端項目裡面需要在項目根目錄配置三個文件：
1..gitlab-ci.yml 文件
stages:
- build
- deploy
# 設置緩存
cache:
paths:
- node_moles/
- dist/
# 安裝依賴 before_script 會在每個 stages 執行之前運行
before_script:
- npm install
# 編譯 這里對應上方 stages ，
build:
stage: build
script:# script 為要執行的命令，可以多條按順序執行
- npm run build:prod
docker-deploy:
stage: deploy
# 執行Job內容
script:
# 通過Dockerfile生成pactera_pflife_ui鏡像
- sudo docker build -t pactera_pflife_ui .
# 刪除已經在運行的容器
- if [ $(docker ps -aq --filter name= pactera_pflife_ui) ]; then sudo docker rm -f pactera_pflife_ui;fi
# 通過鏡像啟動容器
- sudo docker run -d -p 8085:80 --name pactera_pflife_ui pactera_pflife_ui
tags:
# 執行Job的伺服器
- pflife-web
only:
# 只有在master分支才會執行
- dev_xht
2.Dockerfile 文件
# 設置基礎鏡像
FROM nginx:latest
# 將dist文件中的內容復制到 /usr/share/nginx/html/ 這個目錄下面
COPY dist/ /usr/share/nginx/html
# 用本地的 default.conf 配置來替換nginx鏡像里的默認配置
COPY default.conf/etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx","-g","daemon off;"]
3.default.conf文件
server {
listen 80;
server_name 39.100.9.6; # localhost修改為docker服務宿主機的ip
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
location /api/{
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://39.100.9.6:8090/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
總之，三個文件部署之後運行正常
『叄』 gitlab 使用的什麼開發的
Git - 版本控制工具 Git源布式版本控制系統用效、高速處理非項目版本管理[4] Git Linus Torvalds 幫助管理 Linux 內核發發放源碼版本控制軟體 Torvalds 始著手發 Git ...
-
『肆』 前端環境的安裝與配置
前端環境的安裝與配置？一、工具安裝
1.編輯器
2.Git(分布式的代碼管理工具)
3.Photoshop
4.Nodejs鏈接
二、 環境配置
1.配置git：
1.1 設置Git的user name和email：
$ git config --global user.name "name"
$ git config --global user.email "[email protected]"
1.2 生成SSH密鑰過程：(看需求配置)
$ ssh-keygen -t rsa -C "[email protected]"
3個回車，密碼為空。
Your identification has been saved in /home/tekkub/.ssh/id_rsa.
Your public key has been saved in /home/tekkub/.ssh/id_rsa.pub.
The key fingerprint is:
………………
最後得到了兩個文件：id_rsa和id_rsa.pub
添加密鑰到ssh：
登陸gitlab, Profile Settings -> SSH Keys -> ADD SSH KEYS ,找到本地的id_rsa.pub文件，復制出裡面的內容，添加到 key 內，此時 Title 會自動填上你的郵箱，沒有的話手動填寫, ADD KEY
1.3 拉取代碼到本地(許可權)
創建一個存放項目的文件夾，在該文件夾下，單擊右鍵，選擇git bash,打開git命令框，編寫命令：git clone [email protected]:xx/xx.git（可以在gitlab項目中找到存放地址，gitlab地址：http://gitlab.vchangyi.com ），按回車，就可以從gitlab上clone代碼到本地文件夾
1.4 手動安裝nodejs，如果是pc端安裝的話，nodejs版本不能過低。
安裝最新版的話npm安裝項目依賴會有問題，手機端gulp無法啟動，所以建議安裝nodejs V6。
1.5 測試node是否安裝成功
在git 命令窗或者node 命令窗中輸入命令 ：node -v
1.6 同理，測試npm是否安裝成功npm -v
1.7安裝gulp
在項目下打開git 命令窗，從淘寶源上自行安裝，這個時間需要等待和耐心，也會有網路原因導致安裝失敗，如果安裝失敗可以多來幾次，直到成功為止。
如果是pc端：npm install --registry=http://registry.npm.taobao.org --phantomjs_cdnurl=http://cnpmjs.org/downloads
npm 安裝時候 持久使用淘寶源 設置:
npm config set registry https://registry.npm.taobao.org
配置後可通過下面方式來驗證是否成功
npm config get registry
或
npm info express
『伍』 Gitlab+Jenkins通過鉤子實現自動部署web項目，圖文詳細教程
擴展參考：Jenkins+Gitlab通過腳本自動部署回滾web項目至集群
1）:Gitlab伺服器：ubuntu 192.168.152.131 ---參考搭建：Linux安裝gitlab，docker安裝gitlab教程
2）:Jenkins伺服器：ubunu 192.168.152.130 ---參考搭建：linux安裝Jenkins，或docker安裝Jenkins教程
在伺服器上生成ssh-keygen，用於配置web伺服器和Gitlab伺服器。
3）:web伺服器：centos 192.168.152.150 ---已搭建好LNMP環境
4）:開發者電腦：Windows+key密鑰 （用於提交代碼）
1：在gitlab創建項目Test Project
2.1）： 配置一個開發者電腦的ssh公鑰到gitlab
配置一個開發者電腦的ssh公鑰到gitlab，這樣才能模擬開發上傳代碼到gitlab。
windows生成key過程及git安裝，可參考：Windows下git和github的使用圖文詳細教程_the丶only的博客-CSDN博客_github win
在windows測試clone，和提交代碼。
註：最新版git 已經將默認分支master改為main了。所以看到main，而不是master不要太奇怪
測試成功，在gitlab也顯示有index.html文件。
2.2）： 配置jenkins公鑰到gitlab
同理，同樣需要jenkins公鑰，因為jenkins也需要拉去gitlab的代碼。
在 jenkins伺服器 上查看公鑰並復制添加到gitlab，並命名為jekins。
1：插件管理，安裝插件
jenkins本身沒什麼功能，主要是依靠插件來實現各種強大的功能。
基本需要添加的插件：Gitlab Hook、Build Authorization Token Root、Publish Over SSH、Gitlab Authentication、Gitlab、Git Parameter
可以在 Manage Jenkins >> Manage Plugins 查看管理插件。在Available 選項搜索安裝插件即可。
安裝完成後，重啟Jenkins。
2：添加需要部署的web主機
在 Manage Jenkins >> Configure System 中往下翻，找到 Publish over SSH 選項，點擊add ssh server。
在Jenkins伺服器上，查看私鑰，注，是私鑰，不是公鑰。
將私鑰填寫在key位置，還有添加web伺服器相關信息。
註：如果測試報錯如下
Failed to connect or change directory
jenkins.plugins.publish_over.BapPublisherException: Failed to add SSH key. Message [invalid privatekey: [B@2e54414f]
是因為默認用ssh-keygen命令，默認生成了OPENSSH 格式密鑰。而Jenkins暫時不支持這種私鑰，私鑰開頭結尾如下：
所以，需要生成rsa密鑰格式的。用開頭說的ssh-keygen加其他參數生成即可。
私鑰開頭結尾如下：
再次測試，顯示success，則成功。然後點擊save保存即可。
3：構建任務項目
首頁創建任務或者一個項目
命名為web-project，選擇為freestyle project 自由項目。然後ok確認。
3.1）：源碼管理 Source Code Management
選擇源碼管理，添加gitlab的項目clone地址。
註：最後路徑選擇分支，我gitlab主分支名字為main,如果是master，則寫master，或者合並的其他分支。
在add添加用戶
添加完成後，選擇git用戶，這時沒有紅色提醒，說明已成功連接
3.2）：構建觸發器 Build Triggers
現在Build Triggers，勾選build when....，其他默認，並記下鏈接 http://192.168.152.130:8080/project/web-project
點擊高級 advance 選項。
勾選filter branches regex選擇，填寫分支，生產token。其他默認
3.3）：構建 Build
選擇Build 選項。選擇ssh
添加web伺服器
添加完畢，最後save保存。
1：添加鉤子webhooks.
選擇自己的項目Test Project，在設置setting里，選擇鉤子webhooks.
填寫剛才記下的http://192.168.152.130:8080/project/web-project和token值。
最後Add webhook完成：
2：如添加失敗，報錯，更改Network
註：如填寫失敗提示Url is blocked: Requests to the local network are not allowed
還需更改Network選項。
3：測試鉤子
添加完成後，下面會出現鉤子選擇。點擊test中的，push event。
出現successful，即添加成功。
在Jenkins也可以看到剛才的測試時間信息。
在開發電腦上測試提交，我這里為Windows電腦測試。
打開Git Bash，輸入以下命令：
提交成功，回到Jenkins，查看是否構建成功：
綠色顯示構建成功，無錯誤顯示。回到gitlab查看項目。
時間顯示剛才也提交成功，無錯誤。最後在瀏覽器輸入web地址測試，本人配置了web訪問埠8082。所以輸入IP加埠訪問。
內容也已經自動更新成功。
完結撒花！！！