準備工作
已經寫好的代碼，有團隊的需要拉取最新的代碼（今天重點分享團隊前端項目的發佈過程）
軟件：（包括但不限於）——如果工具都OK，將大大降低發佈難度
Nginx：輕量級web服務器
Jenkins：持續集成開發工具
Tomcat：輕量級的應用服務器
Xshell：安全終端模擬軟件
VSCode：前端開發工具
當然還有Maven、Gitlib、JDK，這些都是團隊開發的必備工具
基礎知識：
敏捷開發（Agile Development） 的核心是迭代開發（Iterative Development） 與 增量開發 （Incremental Development） 。這裏具體什麼是迭代開發，什麼是增量開發我就不詳細說了，但是這裏說一點，雖然敏捷開發將軟件開發分成多個迭代，但是也要求，每次迭代都是一個完整的軟件開發週期，必須按 照軟件工程的方法論，進行正規的流程管理。
什麼是持續集成
持續集成（ Continuous integration ， 簡稱 CI ）指的是，頻繁地（一天多次）將代碼集成到主幹。
持續集成的目的，就是讓產品可以快速迭代，同時還能保持高質量。它的核心措施是，代碼集成到主幹 之前，必須通過自動化測試。只要有一個測試用例失敗，就不能集成。
通過持續集成， 團隊可以快速的從一個功能到另一個功能，簡而言之，敏捷軟件開發很大一部分都要歸 功於持續集成。
根據持續集成的設計，代碼從提交到生產，整個過程有以下幾步。
提交
流程的第一步，是開發者向代碼倉庫提交代碼。所有後面的步驟都始於本地代碼的一次提交 （commit）。
測試（第一輪）
代碼倉庫對commit操作配置了鉤子（hook），只要提交代碼或者合併進主幹，就會跑自動化測試。
構建
通過第一輪測試，代碼就可以合併進主幹，就算可以交付了。
交付後，就先進行構建（build），再進入第二輪測試。所謂構建，指的是將源碼轉換爲可以運行的實 際代碼，比如安裝依賴，配置各種資源（樣式表、JS腳本、圖片）等等。
測試（第二輪）
構建完成，就要進行第二輪測試。如果第一輪已經涵蓋了所有測試內容，第二輪可以省略，當然，這時 構建步驟也要移到第一輪測試前面。
部署
過了第二輪測試，當前代碼就是一個可以直接部署的版本（artifact）。將這個版本的所有文件打包（ tar filename.tar * ）存檔，發到生產服務器。
回滾
一旦當前版本發生問題，就要回滾到上一個版本的構建結果。簡單的做法就是修改一下符號鏈接，指 向上一個版本的目錄。
持續集成流程（看完這個圖你會明白點什麼）
項目本地Tomcat打包發佈
發佈前先進行了本地發佈的原因：在於這樣可以檢驗自己項目打包後是否存在問題，如果在本地能夠發佈成功，那麼在遠程服務器上發佈也一定沒有什麼問題。
第一步：用前端開發工具打包（我是vscode）
npm run bulid
第二步：啓動Tomcat
1.啓動tomcat，直接雙擊startup就可以
2.將打包好的應用程序放在tomcat的webapps目錄下
3.啓動tomcat，進入Tomcat Web應用程序管理者，就可以看到放到tomcat目錄下打包好的程序
4.在Tomcat Web應用程序管理者頁面直接點擊剛剛的那個程序，如果頁面加載出來，說明程序打包沒有問題
5.將自己的IP地址加上，這樣其他人就可以訪問到該程序了
點擊項目名稱：/itoo-front-dev彈出下面的頁面，代表本地發佈成功
小結：通過上面將打包好的代碼部署到Tomcat本地服務器上的過程，可以很好的理解將代碼打包到遠程服務器，其實他們都是一個用途，就是將打包好的程序發佈到服務器讓其他用戶都可以訪問到
遠程發佈
第一步：用Jenkins軟件對項目進行部署——打包、部署（這個相當於Tomcat本地部署中的打包和部署）
1）登錄Jenkins，創建新任務
2）輸入任務名稱，選擇自由風格軟件項目
3）項目配置
4)添加構建命令：先下載依賴：npm install，打包:npm run build
5）將打包好的程序部署到對應的服務器
第二步：啓動Xshell，並且連接到需要部署的服務器上去
1）Xshell連接服務器
2）選擇要部署的服務器
第三步：在Linux上下載安裝Nginx
可以參考相關教程：https://www.runoob.com/linux/nginx-install-setup.html
第1步：下載Nginx，
下載地址：wget http://nginx.org/download/nginx-1.9.9.tar.gz
第2步：下載到服務器中的指定位置
[admin@itoo4 src]$ tar -zxvf nginx-1.9.9.tar.gz
第4步：進入到安裝目錄
[admin@itoo4 src]$ cd nginx-1.9.9
第5步：編譯安裝
[admin@itoo4 nginx-1.9.9]$ ./configure
[admin@itoo4 nginx-1.9.9]$ make
[admin@itoo4 nginx-1.9.9]$ make install
第6步：查看版本
[admin@itoo4 nginx-1.9.9]$ nginx -v
第四步：修改Nginx的配置文件
配置文件詳解：https://blog.csdn.net/weixin_42167759/article/details/85049546
[root@bogon conf]# cat /usr/local/webserver/nginx/conf/nginx.conf
user root;
worker_processes 2; #設置值和CPU核心數一致
error_log /usr/local/webserver/nginx/logs/nginx_error.log crit; #日誌位置和日誌級別
pid /usr/local/webserver/nginx/nginx.pid;
#Specifies the value for maximum file descriptors that can be opened by this process.
worker_rlimit_nofile 65535;
events
{
use epoll;
worker_connections 65535;
}
http
{
include mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" $http_x_forwarded_for';
#charset gb2312;
#limit_zone crawler $binary_remote_addr 10m;
#下面是server虛擬主機的配置
server
{
listen 80;#監聽端口
server_name localhost;#域名
index index.html index.htm index.php;
root /usr/local/webserver/nginx/html;#站點目錄
location ~ .*\.(php|php5)?$
{
#fastcgi_pass unix:/tmp/php-cgi.sock;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
include fastcgi.conf;
}
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|ico)$
{
expires 30d;
# access_log off;
}
location ~ .*\.(js|css)?$
{
expires 15d;
# access_log off;
}
access_log off;
}
}
第五步：可能需要檢查你是否有安裝vim
查看是否安裝：rpm -qa|grep vim
安裝vim：yum -y install vim-enhanced
第六步：Jenkins構建
第七步：重啓Nginx
驗證nginx配置文件是否正確
方法一：進入nginx安裝目錄sbin下，輸入命令./nginx -t
看到如下顯示nginx.conf syntax is ok
nginx.conf test is successful 說明配置文件正確！
方法二：在啓動命令-c前加-t
重啓Nginx服務
方法一：進入nginx可執行目錄sbin下，輸入命令./nginx -s reload 即可
方法二：查找當前nginx進程號，然後輸入命令：kill -HUP 進程號 實現重啓nginx服務
其他命令：
/usr/local/nginx/sbin/nginx -s reload # 重新載入配置文件
/usr/local/nginx/sbin/nginx -s reopen # 重啓 Nginx
/usr/local/nginx/sbin/nginx -s stop # 停止 Nginx