本文是为初入前端、后端的小伙伴们准备的保姆级教程,也是我在学习中慢慢摸索出的一套基本流程,内容可能会有不正确的地方,欢迎在评论区指正,作者会持续关注错误之处,并完善这份文档。
前言
本文给出的是基于Linux服务器、RuoYi前端技术栈和Nginx运行环境的Docker部署方案,这样的部署方案在第一次的配置之后,可以做到非常方便的重新部署,只需要将新的dist包上传到文件夹,并在终端执行两段运行代码即可,相较于传统的Nginx或Tomcat部署方案,其运行环境相对独立,不会干扰服务器本身的运行环境,并且理论上可以在同一台服务器上部署非常多的前端系统,而不会相互干扰。
服务器准备
1.准备一个云服务器或者本地Linux服务器
这是一些云服务器厂商的官网:腾讯云官网 阿里云官网 华为云官网,各位自行按需选择,并且给服务器安装好Linux系统,建议Linux系统版本选择Centos7.x,对宝塔面板的兼容性更好,如果自己在本地配置Linux服务器,则需要自行配置好各项硬件和软件。
2.为服务器安装宝塔面板
进入宝塔面板官网,按照其中的教程给服务器安装宝塔面板,建议使用在线安装,输入服务器的IP、账号和密码,直接一键安装,安装时建议勾选安装MySQL和Nginx,其余的可以自行选择安装与否。安装好宝塔面板后,需要确认各端口是否已开启,例如宝塔面板的默认端口、MySQL的默认端口等,并且别忘了把要部署的前端接口也打开,如果没有开启,需要先在服务器的控制台中开启,再在宝塔面板的安全中开启,也就是说服务器本身有一道防火墙,宝塔面板也提供了一道防火墙,两道防火墙都开启,才可以正常访问对应的服务。
3.在服务器中安装Docker并下载镜像
在宝塔面板中点击Docker菜单,如果没有安装过Docker,则会显示安装提示,可以直接点击一键安装(比较省心),也可以在Docker官网中使用脚本方法进行安装(更复杂)。Docker安装完成之后,点开Docker菜单可以看到类似下面这样的页面:
在镜像页面中,点击搜索镜像,输入nginx,点击搜索,选择图中框选的镜像进行拉取,这个镜像是用来构建必要的Nginx环境。
开始部署
1.创建文件夹
在部署前端时,因为部署思路是使用Nginx镜像运行一个容器,容器内运行前端代码,所以首先在根目录中创建一个docker_files文件夹,用于放置dist包和配置文件:
在docker_files文件夹里面新建一个文件夹,用来存放前端的相关文件,名字随意,这里示例使用nginx命名,个人建议命名为你的项目名称,之后同一文件夹下部署多个项目时,可以有所区分:
新建的文件夹中分别创建conf(用于存放nginx配置文件)、html(用存放dist包)和logs(用于存放运行日志文件)文件夹:
2.创建Nginx配置文件
在conf文件夹中新建nginx.conf文件,里面书写如下nginx配置:
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;
}
注意,上面的配置文件仅限于普通Vue项目的部署,而对于RuoYi项目,则需要更进一步进行配置,配置代码如下:
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;
server {
listen 80;
#所部署的服务器IP
server_name xx.xxx.x.xxx ;
charset utf-8;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
location /prod-api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#配套的RuoYi后端的IP地址+端口号
proxy_pass http://xx.xxx.x.xxx:xxxx/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
如果你严格按照我提供的步骤进行部署,那么你只需要修改server_name xx.xxx.x.xxx和proxy_pass http://xx.xxx.x.xxx:xxxx/这两行即可,其他的不需要更改,而此配置文件中,proxy_pass必须是后端的IP地址+端口号,如果你的后端是域名,即https://xx.xx.xx这样的地址,那还需要进行域名解析,这部分需要另寻他法,作者没有研究过域名类型的部署方法。
代码含义:
监听80端口(Docker内部的nginx是运行在80端口的);
将serve_name设置为服务器的地址;
将location当中的root是Docker中前端运行代码存放的位置,这是因为我们之后要将宿主机(部署的服务器)中的/docker_files/nginx/html/dist地址映射绑定到了Docker(运行Nginx的容器)内的/usr/share/nginx/html地址,所以我们root处修改为Docker内的/usr/share/nginx/html地址;
使用location /prod-api/中的配置将前端和后端相连,proxy_pass http://xx.xxx.x.xxx:xxxx/这条即为后端接口的地址,具体后端的接口地址根据自己的填写。
3.上传dist包
接下来,将打包好的dist包上传到html文件夹下:
4.运行Docker容器
一切准备就绪,接下来在控制台中分步执行如下指令,注意第二条指令好多行是一条指令,建议先在txt文档中编辑好,直接粘贴:
# 第一条指令
cd ../
# 第二条指令
docker run -id --name=bdosr-ui-ruoyi \
-p 82:80 \
-v $PWD/docker_files/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v $PWD/docker_files/nginx/logs:/var/log/nginx \
-v $PWD/docker_files/nginx/html/dist:/usr/share/nginx/html \
nginx
代码含义:
第二行,回到根目录,这点很重要
第三行,运行容器,容器的名字是bdosr-ui-ruoyi,这个自己根据需求随意起;
第四行,将容器的80端口映射到宿主机的82端口,根据自己的需求随意修改,别忘了在安全中开启该端口;
第五至七行,将宿主机的docker_files/nginx里面的那些文件夹或文件映射到容器里对应的位置,具体位置根据自己刚刚创建文件夹的路径修改;
第八行,运行的镜像是nginx。
指令输入完,点击回车,如果一切操作没问题,你会看到终端返回了一串字符,这个是容器的ID,也就证明部署完成。
5.部署完成
如图方式点击日志后,可以查看容器的运行日志,可以看到,容器日志和控制台输出是一样的,至此RuoYi前端的Docker部署就完成了。
重新部署
当修改前端项目程序后,就需要重新部署服务,而经过第一遍的配置之后,重新部署变得非常容易,熟练之后,操作会非常迅速。
1.删除容器
在Docker页面,点击容器,删除旧的容器:
2.重新上传dist包并运行指令
将/docker_files/nginx/html文件夹内的旧dist包删除,之后上传新的dist包,再到终端中重新运行这两条命令即可:
cd ../
docker run -id --name=bdosr-ui-ruoyi \
-p 82:80 \
-v $PWD/docker_files/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v $PWD/docker_files/nginx/logs:/var/log/nginx \
-v $PWD/docker_files/nginx/html/dist:/usr/share/nginx/html \
nginx
结尾
后端直接启动jar包就可以,可以参考不用docker部署后端项目的方法直接部署jar包。
参考链接:https://blog.csdn.net/qq_50523945/article/details/140058766
修改完nginx配置文件记得重启下docker容器。