Jenkins +nginx 搭建前端構建環境

前期準備

• liunx 基本命令
• git 基本命令
• nginx
• jenkins

工具

• github 賬號和專案
• git
• centos 伺服器

坐穩啦！ 要發車啦！

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

輸入遠端伺服器地址

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

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

登入成功！

安裝nginx

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

說明伺服器沒有安裝 nginx

yum install nginx //輸入下載
or
yum install epel-release //如果上一步安裝失敗
yum install nginx //再次下載 
複製程式碼

y //回車
複製程式碼

安裝完畢！

nginx -v
複製程式碼

nginx 已經安裝完畢

修改nginx配置

nginx -t //檢視配置檔案地址
cd /etc/nginx
ls //可以看到 nginx.conf 配置檔案
複製程式碼

vim nginx.conf
or
yum install vim //如果沒有可以安裝vim 再次執行上步
複製程式碼

vim 編輯器用法

 i //編輯器底部出現 insert 後 你可以編輯配置檔案了；
複製程式碼

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

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

esc //退出編輯模式
:+ wq //儲存退出
nginx -t 檢視配置檔案是否報錯
複製程式碼

配置顯示成功

建立專案

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

輸入以下內容（hello world）

儲存退出

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

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

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

配置 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 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

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

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

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

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

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

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

建立任務

開始配置第一個 jenkins 任務

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

專案結構

admin
    html
        home.html
    js
        home_page.js
    css
        home.css
    
複製程式碼

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

在構建中選擇“執行 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
複製程式碼

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

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

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