[Spring Boot] 從零開始搭建個人網(wǎng)站
@TOC
手機用戶請
橫屏獲取最佳閱讀體驗，REFERENCES中是本文參考的鏈接，如需要鏈接和更多資源，可以關注其他博客發(fā)布地址。
| 平臺 | 地址 |
|---|---|
| CSDN | https://blog.csdn.net/sinat_28690417 |
| 簡書 | http://www.itdecent.cn/u/3032cc862300 |
| 個人博客 | https://yiyuery.club |
利用 Nginx 和 Spring Boot 微服務模塊實現(xiàn)前后端分離式部署的個人網(wǎng)站搭建。
閱讀前提
- 了解
Docker - 了解
Nginx - 了解
NodeJS - 了解
Spring Boot - 了解
Vue或其他前端相關知識
準備工作
- 擁有一個云服務器（如阿里云 ECS 實例）
- 下載一個開源靜態(tài)的后臺管理網(wǎng)站，并能夠在其基礎上完成新功能開發(fā)。
開始
Aliyun 服務器上運行 Docker
- 通過終端連接服務器
ssh root@x.x.x.x -p 22
- 利用
Docker拉取nginx鏡像并啟動
root:~/nginx$ docker search nginx
NAME DESCRIPTION STARS OFFICIAL AUTOMATED
nginx Official build of Nginx. 3260 [OK]
jwilder/nginx-proxy Automated Nginx reverse proxy for docker c... 674 [OK]
richarvey/nginx-php-fpm Container running Nginx + PHP-FPM capable ... 207 [OK]
million12/nginx-php Nginx + PHP-FPM 5.5, 5.6, 7.0 (NG), CentOS... 67 [OK]
maxexcloo/nginx-php Docker framework container with Nginx and ... 57 [OK]
...
拉取官方的鏡像
docker pull nginx
等待下載完成后，我們就可以在本地鏡像列表里查到 REPOSITORY 為 nginx 的鏡像。
root@aliyun:~/nginx$ docker images nginx
REPOSITORY TAG IMAGE ID CREATED SIZE
nginx latest 555bbd91e13c 3 days ago 182.8 MB
以下命令使用 NGINX 默認的配置來啟動一個 Nginx 容器實例：
$ docker run --name capsule-nginx-web -p 80:80 -d nginx
capsule-nginx-web 容器名稱。
-d設置容器在在后臺一直運行。
-p 端口進行映射，將本地 80 端口映射到容器內(nèi)部的 80 端口。
執(zhí)行以上命令會生成一串字符串，類似 6dd4380ba70820bd2acc55ed2b326dd8c0ac7c93f68f0067daecad82aef5f938，這個表示容器的 ID，一般可作為日志的文件名。
我們可以使用 docker ps 命令查看容器是否有在運行：
root@aliyun:docker ps
CONTAINER ID IMAGE ... PORTS NAMES
6dd4380ba708 nginx ... 0.0.0.0:80->80/tcp capsule-nginx-web
PORTS 部分表示端口映射，阿里云服務器的 80 端口映射到容器內(nèi)部的 80 端口。
在瀏覽器中打開 http://x.x.x.x/，效果如下：
Nginx 部署一個簡單的靜態(tài)界面
首先，創(chuàng)建目錄 nginx, 用于存放后面的相關東西。
root@aliyun: mkdir -p ~/nginx/www ~/nginx/logs ~/nginx/conf
拷貝容器內(nèi) Nginx 默認配置文件到本地當前目錄下的 conf 目錄，容器 ID 可以查看docker ps命令輸入中的第一列：
root@aliyun:docker cp 6dd4380ba708:/etc/nginx/nginx.conf ~/nginx/conf
www: 目錄將映射為 nginx 容器配置的虛擬目錄。
logs: 目錄將映射為 nginx 容器的日志目錄。
conf: 目錄里的配置文件將映射為 nginx 容器的配置文件。
部署命令
root@aliyun: docker run -d -p 80:80 --name capsule-nginx-web -v ~/nginx/www:/usr/share/nginx/html -v ~/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v ~/nginx/logs:/var/log/nginx nginx
命令說明：
-p 80:80： 將容器的 80 端口映射到主機的 80 端口。
--name capsule-nginx-web：將容器命名為 capsule-nginx-web。
-v ~/nginx/www:/usr/share/nginx/html：將我們自己創(chuàng)建的 www 目錄掛載到容器的 /usr/share/nginx/html。
-v ~/nginx/conf/nginx.conf:/etc/nginx/nginx.conf：將我們自己創(chuàng)建的 nginx.conf 掛載到容器的 /etc/nginx/nginx.conf。
-v ~/nginx/logs:/var/log/nginx：將我們自己創(chuàng)建的 logs 掛載到容器的 /var/log/nginx。
查看運行中容器
root@aliyun:~/nginx/www# docker container ls -a
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
d0769a8e9f53 nginx "nginx -g 'daemon of…" 4 days ago Up 3 days 0.0.0.0:80->80/tcp capsule-nginx-web
啟動以上命令后進入 ~/nginx/www 目錄：
cd ~/nginx/www
創(chuàng)建 index.html 文件，內(nèi)容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首頁</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
<a href='capsule-agile-web'>capsule-agile-web</a>
</body>
</html>
如果要重新載入 NGINX 可以使用以下命令發(fā)送 HUP 信號到容器：
docker kill -s HUP container-ID
重啟 NGINX 容器命令：
docker restart container-ID
基于 NodeJS 搭建的靜態(tài)項目 Nginx 分離部署
效果展示
資源下載不唯一，在GitHub上隨便找個自己喜歡的靜態(tài)界面就好。
前文有提到需要了解Vue和NodeJs,前者是目前比較流行的MVVM前端框架，后者是前端渲染引擎。
可以通過 npm run build直接構(gòu)建打包前端文件輸出。
如果實在不會的話也沒關系，正常的相對路徑編寫前端js、css、html即可，保證本地可以瀏覽器預覽效果即可
靜態(tài)資源準備好后，當然可以做些定制開發(fā)，比如數(shù)據(jù)圖表。
前端打包文件上傳
GitHub倉庫，在阿里云服務器中clone下來并放到對應位置
接下來就是nginx的靜態(tài)資源映射了,進入掛載在容器外的nginx的配置文件中
接下來使用前文介紹的方法停止Nginx后重啟即可,效果如下。
微服務實例（提供不同的API服務）可以利用
Spring Boot 來實現(xiàn)。
然后提供對應的服務API接口給前端模塊使用，同樣的，也是以GitHub為載體，上傳后在Aliyun服務器中clone下來直接用命令啟動即可。
Boot 項目啟動命令：
java -jar xxx.jar &
備注: 直接用java -jar xxx.jar，當退出或關閉shell時，程序就會停止掉。以下方法可讓jar運行后一直在后臺運行。
對應Boot服務的接口也需要通過Nginx來實現(xiàn)轉(zhuǎn)發(fā)
同理，配置修改后記得重啟Nginx
如此一來，自己的網(wǎng)站就可以開始運行了。
總結(jié)
本文目的在于分享個人網(wǎng)站搭建的一個方案，適合有一定前后端開發(fā)基礎的同學學習實踐。然后我來列舉下整體思路：
- 準備一個Aliyun服務器，目的是當做服務運行載體
- 準備一個前端資源模塊，目的在于前端交互實現(xiàn)，選擇自己擅長的前端框架，或是整合在微服務Boot項目中也是可以的，但是這樣就不是前后端分離了，后期不好處理。
- 準備多個Boot微服務實例，目的在于提供前端資源模塊需要的API服務。
- 通過
NGINX反向代理，目的在于實現(xiàn)不同ip、端口、資源上下文之間的跨域訪問問題。
綜上，知識的積累源于平時的點點滴滴，要做到學以致用還是要不斷地實踐的！
備注：
關于Aliyun服務器中基礎環(huán)境的一些配置、和阿里云安全規(guī)則配置等知識可以通過百度了解，主要是在Linux運行java應用的一些依賴安裝、端口開放配置等，并不復雜。
REFRENCES
更多
掃碼關注
架構(gòu)探險之道，回復文章標題，獲取本文相關源碼和資源鏈接
知識星球(掃碼加入獲取歷史源碼和文章資源鏈接)
