专栏首页架构探险之道[Spring Boot] 从零开始搭建个人网站

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

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

@TOC

手机用户请横屏获取最佳阅读体验,REFERENCES中是本文参考的链接,如需要链接和更多资源,可以关注其他博客发布地址。

平台

地址

CSDN

https://blog.csdn.net/sinat_28690417

简书

https://www.jianshu.com/u/3032cc862300

个人博客

https://yiyuery.club

利用 NginxSpring 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上随便找个自己喜欢的静态界面就好。 前文有提到需要了解VueNodeJs,前者是目前比较流行的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

.

本文分享自微信公众号 - 架构探险之道(zacsnz1314),作者:MasterYang

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Docker 之 Nginx环境搭建

    <架构探险之路> Docker搭建微服务自动部署平台,让我们来了解下Docker中如何安装、使用nginx吧!

    架构探险之道
  • Nacos 服务注册中心探秘(一)

    Nacos 是构建以“服务”为中心的现代应用架构 (例如微服务范式、云原生范式) 的服务基础设施。

    架构探险之道
  • Docker 之 CentOS 环境安装

    <架构探险之路> Docker搭建微服务自动部署平台,让我们先来了解下CentOS 环境安装、以及Docker的一些常用操作。

    架构探险之道
  • Centos7.3安装nginx

    Nginx (发音为engine x)专为性能优化而开发,其最知名的优点是它的稳定性和低系统资源消耗,以及对并发连接的高处理能力(单台物理服务器可支持3000...

    loong576
  • Nginx 遇到的问题

    嘉美伯爵
  • K8S 部署nginx 自定义命令参数指定配置文件位置启动失败

    路过君
  • CentOS7系统Yum安装Nginx

    院长技术
  • 生产环境 Nginx 在线平滑升级

    生产环境 Nginx 需要增加支持 TCP 反向代理功能,需要再添加--with-stream参数重新编译后,在线升级 Nginx。

    叨叨软件测试
  • Contos7安装Nginx就是这么简单

    最近隔壁部门接到一个微服务的项目,但是rpc框架采用的淘宝的hfs,做了几个demo,然后他们开始进行开发了。但是因为前端不好调试接口,所以又需要搭建一个ngi...

    程序员_备忘录
  • Linux系统下Nginx支持ipv6配置的办法

    需要执行以下命令,查看现有nginx是否支持ipv6,如果参数中具有–with-ipv6,则支持,如 果没有,则不支持,需要重新编译nginx。

    砸漏

扫码关注云+社区

领取腾讯云代金券