如何用一台服务器，部署多个不同的 WEB 项目 (use nginx in docker)

前言

写这篇文章的目的呢，主要是因为最近在部署一个网站。

部署网站这个活儿，说简单不简单——因为它要涉及到配置服务器环境的问题。

说难也不难——因为它也仅仅需要涉及这些问题，它是可控、可复制的。

也就是说，当你学会一次部署网站，之后就都会了。

最后，觉得整篇文章太长了的同学，可以直接拉到最底下，有总结性的理论一篇，字数很少，解释的我认为很清楚。

本篇文章的内容

在说一切问题之前，我们先来跟大家回顾一下软件开发的总流程。

首先，软件开发的种类分为以下两种：

工程类软件开发算法类软件开发

工程类软件包括：

Android APPIOS APPFlutter APPReact Native APPMiniProgram APPVUE SPA WEBAngular SPA WEBReact SPA WEBBootstrap + JQuery WEBPython + Flask ServerJavaScript + Node.js ServerPHP + Slim ServerJava + Spring MVC ServerElectron DesktopC# DesktopQt DesktopUnityOthers...

也就是说，工程类软件主要是如下四大类的：

APP - 手机端应用开发WEB - 浏览器端应用开发Server - 服务器端应用开发Desktop - 电脑桌面端应用开发

（算法类的我不太熟悉，就不在这里献丑了，但是我认为目前的算法岗位，人工智能的需求比较多。）

本篇文章所述的呢，属于 WEB - 浏览器端 SPA 应用开发 的一篇相关技术。

也就是把 单页应用（SPA） 部署到一个服务器上，并且让用户可以通过域名访问它的全流程。

闲话不多说，我们现在开始。

第一步：购买腾讯云 / 阿里云服务器

购买腾讯云 / 阿里云服务器的最主要原因，是为了获得一个 固定公网 IP 地址。

理论上来说，我们自己的个人计算机也是拥有成为一台服务器的可能性的。

但是由于没有一个固定 IP，固其它的人不可以很方便的访问到我们这个服务器。

在这里我提供了一个购买腾讯云服务器的链接地址，大家可以通过它购买一台腾讯云的 CVM 云服务器。

貌似还是挺便宜的....

另外，操作系统建议大家使用 CentOS，本文也将以 CentOS 作为案例。

（选型原因：有一次在与一个身在新加坡的运维朋友聊天的时候，他跟我说，他们很少用 Ubuntu，老莫名其妙宕机）

第二步：重置云服务器密码，使用 SSH 工具远程连接服务器

2.1 ：重置云服务器密码

点击上面的网址，进入腾讯服务器的控制台。

找到 重置密码按钮，按提示重置 SSH 密码。

2.2：使用 SSH 工具远程连接服务器

// for windows - xshell // for macos - finalshell

按照上述网址，找到自己对应平台所需要的 SSH 软件，下载并安装。

（由于我使用的是 macos，故下文均以 finalshell 作为演示截图）

SSH 工具连接服务器配置SSH 连接服务器连接成功

第三步：安装 Docker 与 Docker Composer

3.1：安装 Docker

引用自 菜鸟教程 - CentOS Docker 安装

1、remove old version

> sudo yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest \ docker-latest-logrotate \ docker-logrotate \ docker-selinux \ docker-engine-selinux \ docker-engine

2、安装必要工具

> sudo yum install -y yum-utils device-mapper-persistent-data lvm2

3、添加软件源信息

> sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

4、更新 yum 缓存：

> sudo yum makecache fast

5、安装 Docker-ce：

> sudo yum -y install docker-ce

6、启动 Docker 后台服务

> sudo systemctl start docker

3.2：安装 Docker Composer

> sudo curl -L " -s)-$(uname -m)" -o /usr/local/bin/docker-compose > sudo chmod +x /usr/local/bin/docker-compose > docker-compose -v

docker composer 是一个很好用的 Docker 进阶工具。

我们可以通过撰写 docker-composer.yml 文件并执行 docker-compose up -d 来更快速的安装某一套环境。

第四步：安装 Docker 的可视化管理系统，并配置腾讯云安全组

4.1：安装 Docker 的可视化管理系统

docker volume create portainer_data docker run -d -p 9000:9000 --name portainer --restart always -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer

上面的两部操作中，我们让 Portainer

——也就是我们的 Docker 可视化管理系统运行在了服务器的9000 端口上。

4.2：配置腾讯云安全组

当我们现在访问我们的 http://ip:port 组合时，我们会发现我们并不可以访问成功。

这个原因就是，我们没有配置腾讯云的安全组协议。

腾讯云的安全组是什么意思呢？

就是说，腾讯云会帮你拦截访问你服务器基本上所有端口的 HTTP 请求，

除非你对某个端口单独配置了安全组协议。

所以说，我们现在需要配置下安全组协议好让 9000 端口可以被访问。

点击上面的网址，进入安全组配置，点击「添加入站规则」，按如下方式添加：

第五步：阿里云购买域名，完成域名解析

在阿里云中购买域名，并且解析到你的服务器 IP 地址上去。

当你有多个 WEB 应用都要部署到同一个服务器上时，请确保解析了多个二级域名在同一个服务器上。

（一级域名 http://xxx.org；二级域名：www.xxx.org 或 csm.xxx.org）

这里值得注意的是——域名解析的意思。

我们购买到的域名，如 http://baidu.com，是一级域名域名解析，从概念上讲，是把 www.baidu.com 或 wap.baidu.com 这类的域名解析到某个 IP 地址上（如119.75.217.109）的过程；（详情请看下图的主机记录）域名解析，从操作上讲，就是点击「添加记录」，然后输入「你自己拥有的域名」和「任意一条 IP 地址」，然后点击完成的过程；也就是说，你可以把你的域名映射到任意一个公网 IP 上，对方不用确认

第六步：安装 Nginx，并完成反向代理

6.1：安装反向代理服务器 nginx-reverse-proxy

首先，先在我们的服务器中的 root 目录下面创建文件夹 nginx-reverse-proxy，并在其中创建三个子文件夹：

confwwwlogs

接下来，我们在 conf 文件夹下创建一个文件 nginx.conf：（其内容如下）

usernginx; worker_processes1; error_log/var/log/nginx/error.log warn; pid/var/run/nginx.pid; events { worker_connections1024; } http { include /etc/nginx/mime.types; default_typeapplication/octet-stream; log_formatmain$remote_addr - $remote_user [$time_local] "$request" $status $body_bytes_sent "$http_referer" "$http_user_agent" "$http_x_forwarded_for"; access_log/var/log/nginx/access.logmain; sendfileon; #tcp_nopush on; keepalive_timeout65; #gzipon; include /etc/nginx/conf.d/*.conf; }

最后，我们运行 docker 命令：

docker run -d -p 80:80 --name nginx-reverse-proxy -v ~/nginx-reverse-proxy/www:/usr/share/nginx/html -v ~/nginx-reverse-proxy/conf/nginx.conf:/etc/nginx/nginx.conf -v ~/nginx-reverse-proxy/logs:/var/log/nginx nginx

6.2：安装 WEB 服务器 nginx-www

首先，先在我们的服务器中的 root 目录下面创建文件夹 nginx-www，并在其中创建三个子文件夹：

confwwwlogs

接下来，我们在 conf 文件夹下创建一个文件 nginx.conf：（其内容如下）

usernginx; worker_processes1; error_log/var/log/nginx/error.log warn; pid/var/run/nginx.pid; events { worker_connections1024; } http { include /etc/nginx/mime.types; default_typeapplication/octet-stream; log_formatmain$remote_addr - $remote_user [$time_local] "$request" $status $body_bytes_sent "$http_referer" "$http_user_agent" "$http_x_forwarded_for"; access_log/var/log/nginx/access.logmain; sendfileon; #tcp_nopush on; keepalive_timeout65; #gzipon; include /etc/nginx/conf.d/*.conf; }

最后，我们运行 docker 命令：

docker run -d -p 90:80 --name nginx-www -v ~/nginx-www/www:/usr/share/nginx/html -v ~/nginx-www/conf/nginx.conf:/etc/nginx/nginx.conf -v ~/nginx-www/logs:/var/log/nginx nginx

去配置安全组，让其可以访问 90 端口

6.3：复制 VUE 的 dist 文件夹中内容，到 nginx 的 www 目录

我们现在把我们的 vue 项目打包，运行 npm run build，将项目文件下的 dist 文件夹下面的内容复制到目录：

~/nginx-www/www/

在 portainer 中重启 container（访问之前的 ip:9000 即可）

此时我们在浏览器中输入 ip:90，即可看到我们托管的网站。

6.4：安装 WEB 服务器 nginx-cms

首先，先在我们的服务器中的 root 目录下面创建文件夹 nginx-cms，并在其中创建三个子文件夹：

confwwwlogs

接下来，我们在 conf 文件夹下创建一个文件 nginx.conf：（其内容如下）

usernginx; worker_processes1; error_log/var/log/nginx/error.log warn; pid/var/run/nginx.pid; events { worker_connections1024; } http { include /etc/nginx/mime.types; default_typeapplication/octet-stream; log_formatmain$remote_addr - $remote_user [$time_local] "$request" $status $body_bytes_sent "$http_referer" "$http_user_agent" "$http_x_forwarded_for"; access_log/var/log/nginx/access.logmain; sendfileon; #tcp_nopush on; keepalive_timeout65; #gzipon; include /etc/nginx/conf.d/*.conf; }

最后，我们运行 docker 命令：

docker run -d -p 100:80 --name nginx-cms -v ~/nginx-cms/www:/usr/share/nginx/html -v ~/nginx-cms/conf/nginx.conf:/etc/nginx/nginx.conf -v ~/nginx-cms/logs:/var/log/nginx nginx

去配置安全组，让其可以访问 100 端口

第七步：配置反向代理服务器

usernginx; worker_processes1; error_log/var/log/nginx/error.log warn; pid/var/run/nginx.pid; events { worker_connections1024; } http { server { listen 80; server_name portainer.xxx.org; location / { proxy_set_header X-Real-IP $remote_addr; proxy_set_header Host$http_host; proxy_pass :9000;//把这里的 ip 换成你自己的公网 ip 地址 } } server { listen 80; server_name www.xxx.org; location / { proxy_set_header X-Real-IP $remote_addr; proxy_set_header Host$http_host; proxy_pass :90; //把这里的 ip 换成你自己的公网 ip 地址 } } include /etc/nginx/mime.types; default_typeapplication/octet-stream; log_formatmain$remote_addr - $remote_user [$time_local] "$request" $status $body_bytes_sent "$http_referer" "$http_user_agent" "$http_x_forwarded_for"; access_log/var/log/nginx/access.logmain; sendfileon; #tcp_nopush on; keepalive_timeout65; #gzipon; include /etc/nginx/conf.d/*.conf; }

当我们修改完 nginx.conf，我们需要使用如下指令让其生效：

docker kill -s HUP nginx-reverse-proxy

并且最后需要在 portainer 中重启 container

八、总结

整体流程遵循着一套核心概念

需求：将多个 WEB 项目，部署在一台服务器上。并且每一个项目，都有一个自己的域名可以访问。

解决方案：

购买云服务器，获得 IP 地址购买域名，并将多个二级域名解析到该 IP 地址上；（www.xxx.com->192.168.0.1；cms.xxx.com->192.168.0.1；abc.xxx.com->192.168.0.1）利用 Docker 安装 nginx，它运行在服务器的某一个端口上（我们自己指定）利用 xshell 或者 finalshell 这种 SSH 软件，将我们的项目传输到上一步安装的 nginx 的静态资源文件夹中，于是我们就可以用 192.168.0.1:90 这样的「ip地址:端口号」的形式访问到我们的「一个 WEB 项目」了当我们访问一个地址如 192.168.0.1 时，我们默认访问的是它的 80 端口于是我们可以用 docker 部署多个 nginx 在同一台服务器的非 80 端口上，它们中都部署着不同的 WEB 项目，比如 192.168.0.1:90 中部署的是「官方网站」，192.168.0.1:100 中部署的是「网页游戏」最后我们部署一个 nginx 作为「反向代理服务器」在服务器的 80 端口上，在这个反向代理服务器中配置「域名」与「ip：端口号」的对应关系。（如下图）于是我们就可以通过不同域名，访问同一个服务器上部署的不同项目了！就是这样！