@TOC
手机用户请横屏获取最佳阅读体验，REFERENCES中是本文参考的链接，如需要链接和更多资源，可以关注其他博客发布地址。
平台地址CSDN：https://blog.csdn.net/sinat_28690417
简书：https://www.jianshu.com/u/3032cc862300
个人博客：https://yiyuery.club
利用 nginx 和 Spring Boot 微服务模块实现前后端分离式部署的个人网站搭建。
阅读前提
- 了解Docker
- 了解Nginx
- 了解NodeJS
- 了解Spring Boot
- 了解Vue或其他前端相关知识
准备工作
- 拥有一个云服务器（如阿里云 ECS 实例）
- 下载一个开源静态的后台管理网站，并能够在其基础上完成新功能开发。
开始
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 端口映射到容器内部的 80 端口。
执行以上命令会生成一串字符串，类似 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 端口映射到容器内部的 80 端口。
在浏览器中打开 http://x.x.x.x/，效果如下：
.
Nginx 部署一个简单的静态界面
首先，创建目录 nginx, 用于存放后面的相关东西。
root@aliyun: mkdir -p ~/nginx/www ~/nginx/logs ~/nginx/conf
拷贝容器内 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：将我们自己创建的 www 目录挂载到容器的 /usr/share/nginx/html。
-v ~/nginx/conf/nginx.conf:/etc/nginx/nginx.conf：将我们自己创建的 nginx.conf 挂载到容器的 /etc/nginx/nginx.conf。
-v ~/nginx/logs:/var/log/nginx：将我们自己创建的 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
.
创建 index.html 文件，内容如下：
<!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>
image.png
如果要重新载入 NGINX 可以使用以下命令发送 HUP 信号到容器：
docker kill -s HUP container-ID
重启 NGINX 容器命令：
docker restart container-ID
基于 NodeJS 搭建的静态项目 Nginx 分离部署
效果展示
.
资源下载不唯一，在GitHub上随便找个自己喜欢的静态界面就好。
前文有提到需要了解Vue和NodeJs,前者是目前比较流行的MVVM前端框架，后者是前端渲染引擎。
可以通过 npm run build直接构建打包前端文件输出。
如果实在不会的话也没关系，正常的相对路径编写前端js、css、html即可，保证本地可以浏览器预览效果即可
静态资源准备好后，当然可以做些定制开发，比如数据图表。
.
前端打包文件上传GitHub仓库，在阿里云服务器中clone下来并放到对应位置
接下来就是nginx的静态资源映射了,进入挂载在容器外的nginx的配置文件中
.
.
接下来使用前文介绍的方法停止Nginx后重启即可,效果如下。
.
.
微服务实例（提供不同的API服务）可以利用 Spring Boot 来实现。然后提供对应的服务API接口给前端模块使用，同样的，也是以GitHub为载体，上传后在Aliyun服务器中clone下来直接用命令启动即可。
Boot 项目启动命令：
java -jar xxx.jar &
备注: 直接用java -jar xxx.jar，当退出或关闭shell时，程序就会停止掉。以下方法可让jar运行后一直在后台运行。
.
对应Boot服务的接口也需要通过Nginx来实现转发
.
同理，配置修改后记得重启Nginx
如此一来，自己的网站就可以开始运行了。
总结
本文目的在于分享个人网站搭建的一个方案，适合有一定前后端开发基础的同学学习实践。然后我来列举下整体思路：
- 准备一个Aliyun服务器，目的是当做服务运行载体
- 准备一个前端资源模块，目的在于前端交互实现，选择自己擅长的前端框架，或是整合在微服务Boot项目中也是可以的，但是这样就不是前后端分离了，后期不好处理。
- 准备多个Boot微服务实例，目的在于提供前端资源模块需要的API服务。
- 通过NGINX反向代理，目的在于实现不同ip、端口、资源上下文之间的跨域访问问题。
- 综上，知识的积累源于平时的点点滴滴，要做到学以致用还是要不断地实践的！
备注：
关于Aliyun服务器中基础环境的一些配置、和阿里云安全规则配置等知识可以通过百度了解，主要是在Linux运行java应用的一些依赖安装、端口开放配置等，并不复杂。
REFRENCES
- Docker 安装 Nginx
更多
扫码关注架构探险之道，回复文章标题，获取本文相关源码和资源链接
.
知识星球(扫码加入获取历史源码和文章资源链接)
.
,
