Jenkins +nginx 搭建前端構建環境

幸福拾荒者發表於2019-03-04

前期準備

  • liunx 基本命令
  • git 基本命令
  • nginx
  • jenkins
工具
  • github 賬號和專案
  • git
  • centos 伺服器

坐穩啦! 要發車啦!

首先登入你遠端伺服器地址

輸入遠端伺服器地址

ssh 使用者名稱@遠端伺服器 ip 地址
複製程式碼

首次登入有提示資訊 輸入 yes 就好了

Jenkins +nginx 搭建前端構建環境

登入成功!

Jenkins +nginx 搭建前端構建環境

安裝nginx

nginx -v  //輸入檢視
複製程式碼

說明伺服器沒有安裝 nginx

Jenkins +nginx 搭建前端構建環境
yum install nginx //輸入下載
or
yum install epel-release //如果上一步安裝失敗
yum install nginx //再次下載 
複製程式碼
y //回車
複製程式碼
Jenkins +nginx 搭建前端構建環境

安裝完畢!

Jenkins +nginx 搭建前端構建環境
nginx -v
複製程式碼
Jenkins +nginx 搭建前端構建環境

nginx 已經安裝完畢

修改nginx配置

nginx -t //檢視配置檔案地址
cd /etc/nginx
ls //可以看到 nginx.conf 配置檔案
複製程式碼
Jenkins +nginx 搭建前端構建環境
vim nginx.conf
or
yum install vim //如果沒有可以安裝vim 再次執行上步
複製程式碼

vim 編輯器用法

 i //編輯器底部出現 insert 後 你可以編輯配置檔案了;
複製程式碼
Jenkins +nginx 搭建前端構建環境

修改配置 user 改成 root (伺服器使用者名稱 我的是 root)

Jenkins +nginx 搭建前端構建環境

這是預設靜態資原始檔存放的地址

Jenkins +nginx 搭建前端構建環境
esc //退出編輯模式
:+ wq //儲存退出
nginx -t 檢視配置檔案是否報錯
複製程式碼

配置顯示成功

Jenkins +nginx 搭建前端構建環境

建立專案

cd /root
mkdir www
cd www
vim index.html //建立 index.html 檔案
複製程式碼

輸入以下內容(hello world)

Jenkins +nginx 搭建前端構建環境

儲存退出

nginx // 啟動nginx server
複製程式碼

然後在本地瀏覽器輸入你的 ip 地址加/index.html 就能看到大大的 hello world ! 伺服器配置 server 結束

Jenkins +nginx 搭建前端構建環境

注:如果訪問出錯
檢視阿里雲安全組- 安全組規則是否配置

Jenkins +nginx 搭建前端構建環境
Jenkins +nginx 搭建前端構建環境

配置 Jenkins

安裝

首先要先下載 java 依賴包 和 git

yum install java
yum install git
複製程式碼

首先要先新增 Jenkins 源

wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo
rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key
複製程式碼
yum install jenkins //完成之後直接使用 yum 命令安裝 Jenkins
複製程式碼

配置

Jenkins 修改許可權

vim /etc/sysconfig/jenkins
複製程式碼

找到$JENKINS_USER 改為 “root”:

Jenkins +nginx 搭建前端構建環境

然後更改執行以下命令 Jenkins home,webroot 和日誌的所有權:

chown -R root:root /var/lib/jenkins
chown -R root:root /var/cache/jenkins
chown -R root:root /var/log/jenkins
複製程式碼
service jenkins restart  //啟動 jenkins
複製程式碼

jenkins 啟動成功

Jenkins +nginx 搭建前端構建環境

啟動Jenkins

在本地瀏覽器輸入你的 ip 地址加 預設埠 8080 就可以看到 jenkins 解鎖頁面啦

Jenkins +nginx 搭建前端構建環境

要輸入管理員密碼
那麼剛剛安裝的時候忘記儲存了也沒關係
頁面上有提示 那我們就 去指定的目錄找吧
vim /var/lib/jenkins/secrets/initialAdminPassword

Jenkins +nginx 搭建前端構建環境

就得到了密碼串 複製到輸入框執行一下步吧

Jenkins +nginx 搭建前端構建環境

選擇安裝推薦的外掛即可
等待安裝

Jenkins +nginx 搭建前端構建環境

不用多說輸入就好了 執行 儲存並完成

Jenkins +nginx 搭建前端構建環境

下一步預設 就好了 開始使用 jenkins

Jenkins +nginx 搭建前端構建環境

建立任務

開始配置第一個 jenkins 任務

Jenkins +nginx 搭建前端構建環境

建立一個自由風格的 輸入名稱 點選確定就好了

Jenkins +nginx 搭建前端構建環境
專案結構
admin
    html
        home.html
    js
        home_page.js
    css
        home.css
    
複製程式碼
Jenkins +nginx 搭建前端構建環境

填寫描述、填寫你的 git URL 地址

Jenkins +nginx 搭建前端構建環境

在構建中選擇“執行 shell” 輸入以下命令

rm -rf test.tar.gz
tar czvf test.tar.gz *
mv -f test.tar.gz /root/www
cd /root/www
tar -xzvf test.tar.gz
rm -rf test.tar.gz
複製程式碼
Jenkins +nginx 搭建前端構建環境

點選儲存、回到工程專案下 點選立即構建 等待執行完成(成功)

Jenkins +nginx 搭建前端構建環境

在本地瀏覽器輸入你的 ip 地址加/html/home.html 就能看到構建的專案了

Jenkins +nginx 搭建前端構建環境

嘗試在 git 上修改檔案儲存後 執行立即構建 成功後, 然後在本地瀏覽器重新整理 發現程式碼已經修改

相關文章