A. 啟動 myeclipse如何 關閉 自動重新編譯部署
保存後就OK了
具體文字描述請參看
http://hi..com/sft444639074/item/3de6f26f0bcbfc85c5d24946
B. 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;
}
}
總之，三個文件部署之後運行正常
C. 使用Tomcat和Nginx部署前端項目
第一種方式，將我們的前端項目放置在webapps目錄下
進入tomcat安裝路徑下的conf目錄，在server.xml文件中<Host>標簽內配置虛擬路徑
簡單的解釋一下參數
path 對應用戶請求過來的url路徑, /static 匹配所有以 /static 開頭的請求
docBase 表示實際匹配到的路徑，這里可以使用絕對路徑，也可以使用相對路徑
reloadable 如果為true，則tomcat會自動檢測應用程序的/WEB-INF/lib 和/WEB-INF/classes目錄的變化。（對於靜態資源來說，個人覺得這個配置用處不大）
總結起來就是，對於ip:8080/static的資源請求，會通過虛擬路徑匹配到我們實際的資源路徑music_client/static。
配置好後重啟，我們可以發現已經能夠看到我們的前端項目了
對於ROOT目錄下的資源，tomcat可以直接在根目錄下進行訪問。通過這種方式，我們可以讓項目的路徑去適配tomcat訪問的路徑。
但是這種方式不是特別推薦，當有多個項目在同一個tomcat伺服器上的時候，會不方便管理。
Nginx是當下熱門的伺服器，使用起來只需要進行簡單的配置即可。對於Nginx的安裝大家可以自行網路解決。
我們先進入到usr/local/nginx（具體以實際nginx安裝目錄為准）下的conf目錄，vim編輯nginx.xml。主要進行下面的配置
簡單的解釋一下
listen 表示nginx監聽的埠號，也就是你希望暴露哪個埠給用戶進行訪問
server_name 表示nginx接受請求的域名，一般默認localhost就行
location 模塊用於響應請求，這里的 / 表示匹配8082埠的所有請求
root 表示靜態資源/項目的路徑
index 表示默認的訪問資源
配置完成後，進入 sbin 目錄下，通過 ./nginx -t 檢查配置文件的格式是否正確
如正確 ./nginx 進行啟動或者 ./nginx -s reload 進行重啟
啟動完，我們就可以直接ip:8082直接訪問我們的前端項目啦
開啟nginx的反向代理也比較簡單，只需要加上proxy_pass 配置即可
出現這個問題的原因是： 在history模式下，只是動態的通過js操作window.history來改變瀏覽器地址欄里的路徑，並沒有發起http請求，但是當我們直接在瀏覽器輸入這個地址的時候，就會對伺服器發起http請求，但是這個目標在伺服器上又不存在，所以會返回404。
我們可以通過把所有請求都轉發到首頁上來解決這個問題。只需要在 Nignx 中的配置文件加入如下配置：
事實上，上面的解決方式也是Vue-Router官方推薦的解決方式（ https://router.vuejs.org/zh/guide/essentials/history-mode.html#nginx ）。
那上面的 try_files 為什麼能幫助我們解決這個問題呢？我們可以看一下這個屬性的作用
try_files ：按選項所指定的順序去檢查用戶請求的文件是否存在，如果本地存在的話則返回該請求；不存在的話將該請求轉發到指定的其它路徑。也就是說，比如我們當前的前端項目部署在 /usr/myproj 目錄下，現在我們在瀏覽器發起 ip:port/testApi 請求，那麼此時 uri 為testApi,nginx會先去 $root/testApi （即/usr/local/myproj/testApi）找是否存在該靜態資源，若不存在，則繼續尋找 $root/testApi/index （即/usr/local/myproj/testApi/index）文件是否存在，如果還是不存在，則會把請求轉發到首頁。
而我們的項目本事就是由Vue-Cli創建的 單頁面應用 ，當index頁面接收到請求的時候，對應的history模式路由就可以發揮作用了，根據瀏覽器的路由跳轉到對應的頁面，這也就保證了我們的路由請求都能夠轉發給index頁面來進行處理。
這種問題一般是出現在伺服器一開始安裝Nginx的時候，沒有安裝SSL模塊。在不重裝Nignx的情況下，可以安裝如下方式進行操作：
執行如下命令
這一步只是以防萬一，可以省略
也可以直接執行 ./usr/local/nginx/sbin/nginx -t 看還會不會報錯就行
nginx報錯: [emerg] https protocol requires SSL support in /usr/local/nginx/conf/nginx.conf:50
D. 前端自動部署工具deploy-cli-service
1.先安裝deploy-cli-service依賴
全局安裝 deploy-cli-service
本地安裝 deploy-cli-service
查看版本，表示安裝成功
https://github.com/fuchengwei/deploy-cli-service
2.項目中配置
<package.json>中加上：
根目錄下新建一個<deploy.config.js>文件：
E. web前端項目部署到伺服器：
執行成功後會生成dist文件
4.1 進入到nginx配置目錄：/usr/local/nginx/conf,對 nginx.conf 文件進行配置
使用include可以配置多個.conf文件，如一個項目一個配置文件。在同目錄下創建demo文件夾，並創建demo.conf配置文件
下面使用是以ip地址的方式創建的的配置文件
訪問地址：
其中dist名稱時可以修改，保持與/usr/local/nginx/html下cp名稱一致，否則會訪問不到;並且/usr/local/nginx/html目錄可存在同一ip下多個web項目。
域名與ip綁定
配置域名demo.conf
eg: 域名 - demo.cn
4.2阿里雲配置域名前綴
阿里雲->域名->域名列表—>域名 管理-> 域名解析->解析設置
如圖：記錄值 填寫當前服務ip
學習過程中所記錄，有問題或者有好的方式歡迎指點。不勝感激 🤗 🤗 🤗
F. 前端自動化部署解決方案
對象存儲服務都有提供對應的控制台管理桶，同時也提供響應的API供後端業務調用。
aws-s3官方提供了命令行終端操作庫可以方便在命令行發布我們的靜態資源： https://aws.amazon.com/cn/cli/
我們可以這樣發布：
騰訊的cos可以使用很輕量第三方庫 cos-manager 發布資源: https://github.com/yansenlei/cos-manager
npm script 類似shell 的 exec，可以幫助你執行多個並行或順序執行的命令，我們可以一次性執行 刪除本地dist資源->打包->發布
參考：
https://docs.npmjs.com/misc/scripts
http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html
以上發布我們可以這樣寫：
一個命令，提包走人。（雖然走了有點慌...）
持續集成是一種軟體開發實踐，每一次發布源碼都會集成一次，每一次都會自動化的構建，這意味著也可以把上面的發布腳本在服務端跑起來，打包 測試 發布全部交給CI處理，目前主流的工具是 Travis CI ，具體可以參照： http://efe..com/blog/front-end-continuous-integration-tools/
G. 前端自動化部署伺服器, 告別繁瑣部署過程
簡單實用的前端部署, 一條命令搞定, 省去繁瑣的步驟!
主要是** nodejs shelljs(命令行命令) node-ssh(連接伺服器)**
項目git 地址
(這個git項目是我自己搭的一個比較low的vue腳手架,集成ts)
(第一次寫文章, 文筆不行, 多多包涵,有不對的地方盡管指出)
(主要看 自動部署 在 upload 目錄 )
npm 或 cnpm i chalk ora shelljs node-ssh inquirer compressing -D
大功告成~~
咳咳, 放心, 不會有公眾號啥廣告, 也不會求打賞, 如果您覺得對您有一點點幫助 點個贊或者去GitHub點個star 那就非常感謝了
項目git 地址
H. 利用nginx部署站點,前端資源默認放在
部署springboot+vue項目的時候，我們一般是將打包好的前端項目放在我們後端的resources目錄下，然後前後端一起打包成jar包或者war包部署上伺服器的。也就是說，如果前端項目發生修改的話，那麼即使後端不用修改，前後端項目也要重新放在一起重新打包、重新部署。但是，前端項目打包往往是幾mb大小，而後端項目打包卻要幾十mb。因此，為了方便，我們可以使用Nginx獨立部署前端項目。
一、 Nginx安裝步驟
1、安裝GCC、automake、pcre、zlib和openssl
用rpm -qa 命令查看是否安裝
如果沒有安裝，執行以下命令
yum -y install gcc gcc-c++ automake pcre pcre-devel zlib zlib-devel openssl openssl-devel
1
2、下載Nginx
我是安裝在 /www/server目錄的
cd /www/server
1
weget命令下載
wget http://nginx.org/download/nginx-1.16.1.tar.gz
1
tar zxvf 解壓
tar zxvf nginx-1.16.1.tar.gz
1
重命名 nginx-1.16.1文件夾
mv nginx-1.16.1 nginx
1
3、安裝Nginx,默認安裝目錄：/usr/local/nginx
進入nginx文件夾，運行configure腳本
cd nginx
./configure
1
2
編譯、安裝
make
make install
1
2
切換到安裝目錄
cd /usr/local/nginx
1
注意：html：存放了兩個後綴名為.html的靜態文件，前端項目打包後的文件放在此處，編輯好配置文件，啟動Nginx伺服器即可成功部署前端項目。
4、修改配置文件、開放埠
vim /usr/local/nginx/conf/nginx.conf
1
埠改為 8051
5、啟動Nginx
cd /usr/local/nginx
./sbin/nginx
1
2
6、其他命令
查看進程
ps -ef|grep nginx
1
重啟Nginx
/usr/local/nginx/sbin/nginx -s reopen
1
停止Nginx
/usr/local/nginx/sbin/nginx -s stop
1
重載Nginx配置文件
/usr/local/nginx/sbin/nginx -s reload
1
7、訪問
curl 127.0.0.1:8051
1
如果訪問不了，伺服器安全組開放埠以及防火牆放行埠
firewall-cmd --zone=public --add-port=8051/tcp --permanent
1
firewall-cmd --reload
1
二、前端項目獨立部署
1、將打包的前端項目上傳到/usr/local/nginx/html目錄
2、 重新啟動即可成功訪問到前端項目
/usr/local/nginx/sbin/nginx -s reopen
1
可能遇到的問題
1、刷新頁面查詢404的情況，也就是頁面找不到
修改Nginx配置文件
try_files $uri $uri/ /index.html;
1
重新載入配置文件重啟Nginx
I. 將項目部署到 tomcat下，每次修改js代碼後，刷新頁面後怎麼不能自動部署，而是需要重新部署下才行
你的項目修改後到項目同步到tomcat由於各個因素影響是要有一定時間的，有時候你刷新的時候可能還沒同步上去，一般多刷幾次就好