在线预览地址 https://nav.carolin-violet.cn/
一. 前期准备
腾讯云服务器 -宝塔Linux面板 8.1.0 腾讯云专享版
域名，并且备案
宝塔，并且安装nginx和docker
二. 服务部署
mysql部署
在宝塔面板先拉取mysql镜像，然后运行容器,将3306端口暴露到外部的3307端口(注意腾讯云服务器上防火墙开放3307端口)并选用bridge网络模式,之后在服务器上创建持久化相关的挂载目录,挂载目录如下:
然后添加环境变量
MYSQL_ROOT_PASSWORD=数据库root密码
容器成功运行后使用本地的navicat直接连接测试，注意使用暴露的3307端口
后端部署
先在项目根目录添加dockerfile如下：
# 使用 Node.js 官方镜像作为基础镜像
FROM node:14
# 设置工作目录
WORKDIR /usr/src/app
# 复制 package.json 和 package-lock.json 到工作目录
COPY package*.json ./
# 安装项目依赖
RUN npm install
# 复制应用程序文件到工作目录
COPY . .
# 暴露容器端口
EXPOSE 8080
# 服务端口
ENV PORT=8080
# 服务ip
ENV IP=0.0.0.0
# mysql连接地址
ENV MYSQL_HOST=locahost
# 后端路由前缀
ENV API_PREFIX=/violet-nav-api/
# 指定启动命令
CMD [ "node", "app.js" ]
之后在宝塔面板用docker构建镜像并运行容器，将8080端口映射到外部的30002端口并开放腾讯云服务器的30002端口，并将MYSQL_HOST环境变量设置为mysql容器的ip，由于用的bridge模式,所以先查看mysql容器的端口如下:
在启动后端docker容器时将ip设置为172.17.0.4,之后可以用post先测试下接口是否正常、与mysql交互是否正常
前端部署
思路：前端准备一份dockerfile，并且在服务器上创建个nginx.conf作为docker容器里nginx的挂载目录,使用docker构建了前端镜像后配置nginx代理。
在前端项目根目录创建dockerfile如下:
FROM nginx
WORKDIR /usr/share/nginx/html/
USER root
COPY ./dist/ /usr/share/nginx/html/
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]在服务器的/www/docker/navigation_portal目录下创建nginx.conf文件
使用docker构建镜像并创建容器运行，进行端口映射将80端口映射到外部的30001端口并在腾讯云防火墙放开相应端口,之后进行存储挂载，配置如下
然后到服务器挂载目录的nginx.conf进行配置，主要配置反向代理到后端接口，配置如下,
server {
listen 80;
# gzip config
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
root /usr/share/nginx/html;
include /etc/nginx/mime.types;
location / {
try_files $uri /index.html;
}
location /violet-nav-api/ {
# 此ip为后端docker容器的桥接网络ip
proxy_pass http://172.17.0.5:8080/violet-nav-api/;
}
}二级域名配置
先在腾讯云域名解析配置二级域名解析如下,配置nav的二级域名
然后在宝塔面板配置服务器的本机nginx转发，作用是将nav.carolin-violet.cn转发到docker容器部署的前端
server
{
listen 80;
listen 443 ssl;
server_name nav.carolin-violet.cn;
index index.html index.htm index.php;
root /www/server/phpmyadmin;
ssl_certificate /www/cert/carolin-violet.cloud_bundle.pem;
ssl_certificate_key /www/cert/carolin-violet.cloud.key;
# 强制http转https
if ($server_port !~ 443){
rewrite ^(/.*)$ https://$host$1 permanent;
}
location / {
proxy_pass http://127.0.0.1:30001/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
