[Spring Boot] 从零开始搭建个人网站

手机用户请横屏获取最佳阅读体验，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>