前言
写这篇文章的目的呢,主要是因为最近在部署一个网站。
部署网站这个活儿,说简单不简单——因为它要涉及到配置服务器环境的问题。
说难也不难——因为它也仅仅需要涉及这些问题,它是可控、可复制的。
也就是说,当你学会一次部署网站,之后就都会了。
最后,觉得整篇文章太长了的同学,可以直接拉到最底下,有总结性的理论一篇,字数很少,解释的我认为很清楚。
本篇文章的内容
在说一切问题之前,我们先来跟大家回顾一下软件开发的总流程。
首先,软件开发的种类分为以下两种:
工程类软件开发算法类软件开发
工程类软件包括:
AndroidAPPIOSAPPFlutterAPPReact NativeAPPMiniProgramAPPVUE SPAWEBAngular SPAWEBReact SPAWEBBootstrap + JQueryWEBPython + FlaskServerJavaScript + Node.jsServerPHP + SlimServerJava + Spring MVCServerElectronDesktopC#DesktopQtDesktopUnityOthers...
也就是说,工程类软件主要是如下四大类的:
APP -手机端应用开发WEB -浏览器端应用开发Server -服务器端应用开发Desktop -电脑桌面端应用开发
(算法类的我不太熟悉,就不在这里献丑了,但是我认为目前的算法岗位,人工智能的需求比较多。)
本篇文章所述的呢,属于WEB - 浏览器端 SPA 应用开发的一篇相关技术。
也就是把单页应用(SPA) 部署到一个服务器上,并且让用户可以通过域名访问它的全流程。
闲话不多说,我们现在开始。
第一步:购买腾讯云 / 阿里云服务器
https://buy./cvm
购买腾讯云 / 阿里云服务器的最主要原因,是为了获得一个固定公网 IP 地址。
理论上来说,我们自己的个人计算机也是拥有成为一台服务器的可能性的。
但是由于没有一个固定 IP,固其它的人不可以很方便的访问到我们这个服务器。
在这里我提供了一个购买腾讯云服务器的链接地址,大家可以通过它购买一台腾讯云的 CVM 云服务器。
貌似还是挺便宜的....
另外,操作系统建议大家使用 CentOS,本文也将以 CentOS 作为案例。
(选型原因:有一次在与一个身在新加坡的运维朋友聊天的时候,他跟我说,他们很少用 Ubuntu,老莫名其妙宕机)
第二步:重置云服务器密码,使用 SSH 工具远程连接服务器
2.1 :重置云服务器密码
https://console./cvm/index
点击上面的网址,进入腾讯服务器的控制台。
找到重置密码按钮,按提示重置 SSH 密码。
2.2:使用 SSH 工具远程连接服务器
https://xshell./ // for windows - xshell/t/988.html// for macos - finalshell
按照上述网址,找到自己对应平台所需要的 SSH 软件,下载并安装。
(由于我使用的是 macos,故下文均以 finalshell 作为演示截图)
第三步:安装 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 /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 "/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_datadocker 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./cvm/securitygroup
当我们现在访问我们的 http://ip:port 组合时,我们会发现我们并不可以访问成功。
这个原因就是,我们没有配置腾讯云的安全组协议。
腾讯云的安全组是什么意思呢?
就是说,腾讯云会帮你拦截访问你服务器基本上所有端口的 HTTP 请求,
除非你对某个端口单独配置了安全组协议。
所以说,我们现在需要配置下安全组协议好让 9000 端口可以被访问。
点击上面的网址,进入安全组配置,点击「添加入站规则」,按如下方式添加:
第五步:阿里云购买域名,完成域名解析
在阿里云中购买域名,并且解析到你的服务器 IP 地址上去。
当你有多个 WEB 应用都要部署到同一个服务器上时,请确保解析了多个二级域名在同一个服务器上。
(一级域名 ;二级域名: 或 )
这里值得注意的是——域名解析的意思。
我们购买到的域名,如 ,是一级域名域名解析,从概念上讲,是把或这类的域名解析到某个 IP 地址上(如119.75.217.109)的过程;(详情请看下图的主机记录)域名解析,从操作上讲,就是点击「添加记录」,然后输入「你自己拥有的域名」和「任意一条 IP 地址」,然后点击完成的过程;也就是说,你可以把你的域名映射到任意一个公网 IP 上,对方不用确认
第六步:安装 Nginx,并完成反向代理
6.1:安装反向代理服务器 nginx-reverse-proxy
首先,先在我们的服务器中的 root 目录下面创建文件夹 nginx-reverse-proxy,并在其中创建三个子文件夹:
confwwwlogs
接下来,我们在 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_nopushon;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,并在其中创建三个子文件夹:
confwwwlogs
接下来,我们在 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_nopushon;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,并在其中创建三个子文件夹:
confwwwlogs
接下来,我们在 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_nopushon;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 ;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 ;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_nopushon;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 地址上;(->192.168.0.1;->192.168.0.1;->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:端口号」的对应关系。(如下图)于是我们就可以通过不同域名,访问同一个服务器上部署的不同项目了!就是这样!
web自动化如何在不同浏览器运行_如何用一台服务器 部署多个不同的 WEB 项目 (use nginx in docker)...
如果觉得《web自动化如何在不同浏览器运行_如何用一台服务器 部署多个不同的 WEB 项目 (use》对你有帮助,请点赞、收藏,并留下你的观点哦!