時間就如白駒過隙，轉眼間已經是 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 工程師的潛力。
