前言

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

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

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

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

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

本篇文章的内容

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

首先,软件开发的种类分为以下两种:

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

工程类软件包括:

  • Android APP
  • IOS APP
  • Flutter APP
  • React Native APP
  • MiniProgram APP
  • VUE SPA WEB
  • Angular SPA WEB
  • React SPA WEB
  • Bootstrap + JQuery WEB
  • Python + Flask Server
  • JavaScript + Node.js Server
  • PHP + Slim Server
  • Java + Spring MVC Server
  • Electron Desktop
  • C# Desktop
  • Qt Desktop
  • Unity
  • Others...

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

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

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

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

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


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


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


https://buy.cloud.tencent.com/cvm


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

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

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

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

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

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

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

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

2.1 :重置云服务器密码


https://console.cloud.tencent.com/cvm/index


Portainer 管理多台服务器docker docker部署多台服务器_web自动化如何在不同浏览器运行


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

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

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


https://xshell.en.softonic.com/        // for windows - xshell
http://www.hostbuf.com/t/988.html      // for macos - finalshell


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

(由于我使用的是 macos,故下文均以 finalshell 作为演示截图)


Portainer 管理多台服务器docker docker部署多台服务器_服务器_02

SSH 工具连接服务器配置

Portainer 管理多台服务器docker docker部署多台服务器_nginx_03

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 "https://github.com/docker/compose/releases/download/1.24.0/docker-compose-$(uname -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:配置腾讯云安全组


https://console.cloud.tencent.com/cvm/securitygroup


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

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

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

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

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

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

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


Portainer 管理多台服务器docker docker部署多台服务器_nginx_04


第五步:阿里云购买域名,完成域名解析

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

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

(一级域名 http://xxx.org;二级域名:www.xxx.org 或 csm.xxx.org)


Portainer 管理多台服务器docker docker部署多台服务器_nginx_05


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


Portainer 管理多台服务器docker docker部署多台服务器_web自动化如何在不同浏览器运行_06


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

第六步:安装 Nginx,并完成反向代理

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

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

  • conf
  • www
  • logs

接下来,我们在 conf 文件夹下创建一个文件 nginx.conf(其内容如下)


user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$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.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    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,并在其中创建三个子文件夹:

  • conf
  • www
  • logs

接下来,我们在 conf 文件夹下创建一个文件 nginx.conf(其内容如下)


user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$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.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    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,即可看到我们托管的网站。


Portainer 管理多台服务器docker docker部署多台服务器_web自动化如何在不同浏览器运行_07


6.4:安装 WEB 服务器 nginx-cms

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

  • conf
  • www
  • logs

接下来,我们在 conf 文件夹下创建一个文件 nginx.conf(其内容如下)


user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$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.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    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 端口

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


user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


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         http://ip: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         http://ip:90; //把这里的 ip 换成你自己的公网 ip 地址
    }
   }
    
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$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.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}


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


docker kill -s HUP nginx-reverse-proxy


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


Portainer 管理多台服务器docker docker部署多台服务器_web自动化如何在不同浏览器运行_08


Portainer 管理多台服务器docker docker部署多台服务器_nginx_09


八、总结

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

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

解决方案:

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


Portainer 管理多台服务器docker docker部署多台服务器_服务器_10