時間就如白駒過隙，轉眼間已經是 2028 年了，小二入職一家初創公司已經 6 年了，眼瞅著開發團隊從 3 個人壯大到 54 人，心里有時候會感覺挺不可思議的，
這些年，身邊的同事來了又去，有些剛熟悉沒多久，就因為看不到公司前景迅速撤退了，像他這樣堅持下來的老員工，寥寥無幾，大概也就四根手指頭吧，如果不包括老板的話，
小二之所以沒走，并不是因為他目光長遠，看清楚了公司的發展前景，而是他自己不知道去哪里更好，只是沒想到，公司在當地發展的還挺有模有樣，
這是六年前他寫下的一篇關于編程喵??開源專案如何一鍵部署在云服務器上的方案，現在看起來雖然有些稚嫩，但足夠的詳細，使用起來也非常的便捷，有需要的小伙伴可以拿來作為參考和借鑒，
前情提示：不喜歡寶塔面板的小伙伴可以扭臉就走了，請冷酷無情點，下一篇上 Docker，
云服務器
我們需要一臺云服務器，我之前白嫖過一臺丐版的，1 核1G 記憶體，并且已經安裝了寶塔面板（安裝教程戳鏈接??），
這是從寶塔面板首頁看到的服務器配置詳情，
馬上 618 了，阿里云服務器也開始整活了，需要白嫖的小伙伴可以關注下，
MySQL
登錄寶塔面板，點擊「資料庫」→「添加資料庫」，填寫資料庫名，寶塔面板會自動幫我們創建一個和資料庫同名的賬號，注意訪問權限選擇「本地服務器」，
在 codingmore 欄目中點擊「匯入」「從本地上傳」編程喵的資料庫檔案，上傳完成后點擊匯入，
DB 檔案放在 coding-more/doc 目錄下，
建議先做一次備份，點擊「無備份」「備份」就可以將我們的資料庫檔案備份下來了，如果后面想恢復的話，直接點擊「恢復」就可以了，
記住用戶名，并復制密碼，然后在資料庫條目中點擊「管理」
填寫用戶名和密碼后，點擊執行，
就可以看到編程喵的資料庫檔案了，
Nginx
Nginx 是一個高性能的 HTTP 和反向代理 Web 服務器，基本上就變成了一個服務器必須安裝的前置條件之一，
寶塔面板中安裝 Nginx 比較簡單，直接在軟體商店中搜「Nginx」就可以點擊安裝了，
Redis
寶塔面板中安裝 Redis 也比較簡單，直接在軟體商店中搜「Redis」就可以點擊安裝了，
專案打包
1）codingmore-admin
編程喵的管理后端，注意修改生產環境下的 MySQL 用戶名和密碼，在 application-prod.yml 檔案中，
然后把 application.yml 檔案中的 active 修改為 prod 生產環境，
替換 OSS 配置，
2）codingmore-web
編程喵的 Web 前端（網站門戶、文章展示/文章詳情等），注意修改生產環境下的 MySQL 用戶名和密碼，在 application-prod.yml 檔案中，
然后把 application.yml 檔案中的 active 修改為 prod 生產環境，
然后就可以雙擊 Maven 的 package 打包了，
3）codingmore-admin-web
admin 管理端的前端界面，在 Visual Studio Code 中，現在終端中執行 yarn install 安裝專案的依賴插件，
再執行 yarn run build 就可以構建 codingmore-admin-web 的靜態頁面了，
會在專案的根目錄中生成一個 dist 目錄，里面就是打包好的管理端靜態頁面，
打包的時候有兩個要點要補充下，在 config 目錄下有三個組態檔，dev.env.js 是開發環境下的一些配置，index.js 是主配置，prod.env.js 是生產環境下的配置，
為了提高網站的性能，我們需要關閉 source map，設定 productionSourceMap: false，同時開啟 js 和 css 的檔案壓縮功能，
這樣打包后的檔案大小就會小很多，放到服務器上也能減少網路請求的回應時間，
可以看得出，最大的一個 js 檔案為 3.7M，壓縮版只有 662kb，體積縮小了五倍，
將打包好的檔案上傳到服務器
在寶塔面板中點擊「FTP」「添加 FTP」，
點擊「根目錄」
跳轉到檔案頁，
點擊上傳，在 target 目錄下選擇上傳的兩個 jar 包，admin 和 web，
點擊「開始上傳」
還有 codingmore-admin-web 的靜態檔案，
一鍵部署
在軟體商店里搜「Java」關鍵字，可以看到一個「Java 專案一鍵部署 3.5」的插件，安裝它，
進入「Java 專案一鍵部署」面板，
可以在「容器管理」面板中選擇 Tomcat 8 安裝下，如果沒有安裝 JDK，在安裝 Tomcat 8 的時候會默認安裝一個 JDK 1.8，
進入 Spring Boot 面板，點擊「添加專案」，點擊「專案路徑」右側的檔案夾圖示，就可以上傳部署我們的 Spring Boot 專案了，
codingmore-web（網站前端）
先選擇 codingmore-web，
填寫域名（編程喵的域名為 codingmore.top），修改埠號為 8081，application.yml 檔案中定義的，
點擊確定，
可以看到服務已經在啟動了，點「日志」看一下，
沒問題，
也可以在這個路徑下使用終端工具看日志，
在安全面板里確認一下 8081 埠是否放開，
確認放開后，打開 Chrome 瀏覽器的無痕模式，輸入 IP+埠號，
通過域名+埠號的形式也可以訪問到，
codingmore-admin（網站管理端）
再次進入 「Java 專案一鍵部署」Spring Boot 面板中，添加 codingmore-admin 專案，
稍等片刻，來看一下日志，
啟動沒問題，
codingmore-admin 只是一個后端服務，界面是用 vue 完成的，所以我們此時可以通過 Swagger 來確認一下介面是否可以正常訪問，
先放行 9002 埠，
在瀏覽器地址欄里輸入 http://www.codingmore.top:9002/doc.html，可以看到我們用 Knife4j+Swagger 生成的 API 檔案介面，
OK，這樣就可以驗證我們的 admin 端服務也正確運行了，
隨后，為了減少服務器被攻擊的可能性，我們關掉 9002 的埠，
Nginx 配置
codingmore-web
域名+埠號雖然可以訪問，但不夠優雅，我們想直接訪問域名 codingmore.top，該怎么辦呢？
可以使用 Nginx 進行埠轉發，
Nginx 的實作原理是，用 Nginx 監聽 80 埠，當有 HTTP 請求到來時，將 HTTP 請求的 HOST 等資訊與組態檔進行匹配并轉發給對應的埠，
比如說，當用戶訪問 codingmore.top 時，Nginx 從組態檔中得知這是一個 HTTP 請求，于是將此請求轉發給 8081 埠的應用處理，
upstream codingmore_web_pool{
server 127.0.0.1:8081;
}
server {
listen 80;
server_name codingmore.top;
access_log logs/codingmore_web.log;
error_log logs/codingmore_web.error;
#將所有請求轉發給pool池的應用處理
location / {
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://codingmore_web_pool;
}
}
這就是所謂的埠轉發，由軟體統一監聽某個域名上的某個埠（一般是80埠），當訪問服務器的域名和埠符合要求時，就按照配置轉發給指定的 Tomcat 服務器處理，我們常用的 Nginx 也有埠轉發功能，
OK，原理了解完后，我們把這段配置復制到寶塔面板中的 Nginx 配置中，
點擊「保存」，
再在瀏覽器中訪問 codingmore.top 就可以請求到內容了，
既然如此，我們順帶把 8081 埠給關掉，減少一個服務器被攻擊的可能性，
OK，這樣我們就完成了 codingmore-web 也就是編程喵??前端的服務部署了，
codingmore-admin-web
codingmore-admin-web 打包后的檔案是靜態的，所以我們只需要在 Nginx 里添加 admin 的配置路徑就 OK 了，
upstream codingmore_web_pool{
server 127.0.0.1:8081;
}
server {
listen 80;
server_name codingmore.top;
access_log /home/www/codingmore_web.log;
error_log /home/www/codingmore_web.error;
location /admin {
alias /www/wwwroot/itwanger/dist/; # 根目錄
index index.html;
}
#將所有請求轉發給pool池的應用處理
location / {
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://codingmore_web_pool;
}
}
我們在 server 中增加了一個 admin 的 location，也就是說，當我們訪問 codingmore.top/admin 的時候，就去請求 /www/wwwroot/itwanger/dist/ 目錄下的靜態檔案，
這里講一下 root 和 alias 的區別：
- root：實際訪問的地址前綴是 root + 請求的 path路徑，即
admin => /www/wwwroot/itwanger/dist/admin - alias: 實際訪問的就是
/www/wwwroot/itwanger/dist
注意兩者的區別，我們來訪問下codingmore.top/admin：
OK，
編程喵??是一個前后端分離專案，前端的請求如何訪問后端的 API 介面呢？簡單聊一下，
打開 codingmore-admin-web/config/prod.env.js 檔案，里面有一個 VUE_APP_BASE_API 屬性，它的值為 /api，也就意味著前端的請求會發送到 /api 這個前綴路徑下，
'use strict'
module.exports = {
NODE_ENV: '"production"',
VUE_APP_BASE_API: '"/api"'
}
那我們的 codingmore-admin 后端服務是跑在 9002 埠下的，這就意味著，我們需要在 Nginx 中增加一個路徑，將 api 前綴的請求轉發到 9002 下，
OK，來看一下完整的配置內容，
upstream codingmore_web_pool{
server 127.0.0.1:8081;
}
upstream codingmore_admin_pool{
server 127.0.0.1:9002/;
}
server {
listen 80;
server_name codingmore.top;
access_log /home/www/codingmore_web.log;
error_log /home/www/codingmore_web.error;
location /admin {
alias /www/wwwroot/itwanger/dist/; # 根目錄
index index.html;
}
location /api/ {
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://codingmore_admin_pool;
}
#將所有請求轉發給pool池的應用處理
location / {
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://codingmore_web_pool;
}
}
ok，登錄 admin 端，可以看到我們的文章管理頁面了，
網站域名
- 編程喵 web 端：www.codingmore.top
- 編程喵 admin 端：www.codingmore.top/admin
- 編程喵 GitHub 倉庫：https://github.com/itwanger/coding-more
沒有什么使我停留——除了目的，縱然岸旁有玫瑰、有綠蔭、有寧靜的港灣，我是不系之舟，
本文已收錄到 GitHub 上星標 2.6k+ 的開源專欄《Java 程式員進階之路》，據說每一個優秀的 Java 程式員都喜歡她，風趣幽默、通俗易懂，內容包括 Java 基礎、Java 并發編程、Java 虛擬機、Java 企業級開發（Git、Nginx、Maven、Intellij IDEA、Spring、Spring Boot、Redis、MySql 等等）、Java 面試等核心知識點，學 Java，就認準 Java 程式員進階之路??，
https://github.com/itwanger/toBeBetterJavaer
star 了這個倉庫就等于你擁有了成為了一名優秀 Java 工程師的潛力，
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/492212.html
標籤：Java