前言
写这篇文章的目的呢,主要是因为最近在部署一个网站。
部署网站这个活儿,说简单不简单——因为它要涉及到配置服务器环境的问题。
说难也不难——因为它也仅仅需要涉及这些问题,它是可控、可复制的。
也就是说,当你学会一次部署网站,之后就都会了。
最后,觉得整篇文章太长了的同学,可以直接拉到最底下,有总结性的理论一篇,字数很少,解释的我认为很清楚。
本篇文章的内容
在说一切问题之前,我们先来跟大家回顾一下软件开发的总流程。
首先,软件开发的种类分为以下两种:
- 工程类软件开发
- 算法类软件开发
工程类软件包括:
- 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
点击上面的网址,进入腾讯服务器的控制台。
找到 重置密码按钮,按提示重置 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 作为演示截图)
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 "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 端口可以被访问。
点击上面的网址,进入安全组配置,点击「添加入站规则」,按如下方式添加:
第五步:阿里云购买域名,完成域名解析
在阿里云中购买域名,并且解析到你的服务器 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,并在其中创建三个子文件夹:
- 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,即可看到我们托管的网站。
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
八、总结
整体流程遵循着一套核心概念
需求:将多个 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:端口号」的对应关系。(如下图)
- 于是我们就可以通过不同域名,访问同一个服务器上部署的不同项目了!就是这样!