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 上修改文件保存後 執行當即構建 成功後， 而後在本地瀏覽器刷新 發現代碼已經修改

歡迎訪問 幸福拾荒者 瞭解更多前端知識！