OJ的前端由三个部分组成，分为学生端、教师端、管理员端。这里采用docker的方法进行在服务器端的部署，同时使用nginx进行管理。
本地操作
首先，给本地的三个Vue项目分别打包，执行命令之后项目根目录下会出现三个dist 文件夹，将其上传至服务器。
yarn build
因为生产环境与开发环境是不同的，所以为了部署要更改项目的一些配置：
- 首先，要更改
vue.config.js文件中的配置。对于学生端，要将baseUrl改成/，而其它两个vue项目分别改成/teacher/和/admin/。 - 其次，要更改vue项目的页面路由配置。将
base改成/，其它两个vue项目分别改成/teacher/和/admin/。
服务器操作
1. 编写 Dockerfile
# 使用nginx作为基础镜像
FROM nginx:1.13.7
LABEL maintainer="jlx19980823@gmail.com"
# 将dist文件夹复制到容器中的相应文件夹中
COPY dist/ /usr/share/nginx/html/
# 删除容器中默认的conf文件
RUN rm /etc/nginx/conf.d/default.conf
# 添加自己的conf文件(deployFE.conf)到容器中
ADD deployFE.conf /etc/nginx/conf.d/
# 创建一个error.log文件，用来汇总nginx报错信息
RUN mkdir -p /etc/nginx/logs
RUN touch /etc/nginx/logs/error.log
RUN /bin/bash -c 'echo init ok!!!'
2. 编写Nginx配置文件(即deployFE.conf)
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html/student;
try_files $uri $uri/ @router;
index index.html index.htm;
}
location /teacher/ {
root /usr/share/nginx/html;
try_files $uri $uri/ @router;
index index.html index.htm;
}
location /admin/ {
root /usr/share/nginx/html;
try_files $uri $uri/ @router;
index index.html index.htm;
}
location @router {
rewrite ^.*$ /index.html last;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
error_log logs/error.log error;
}
3. Docker部署
构建镜像前项目目录应如下所示：
.
├── Dockerfile
├── deployFE.conf
└── dist (3个vue项目各自对应的dist文件)
├── student
├── admin
└── teacher
首先，构建镜像ojfe_deploy。命令如下：
docker build -t ojfe_deploy .
然后，使用刚创建的镜像ojfe_deploy运行一个名为ojfe的容器。命令中的-d表示容器在后台运行；-p表示端口号映射，端口5000为外网访问的端口，端口80为 Nginx 反向代理寻找的内部端口。
docker run --name ojfe -d -p 5000:80 ojfe_deploy
此时，访问http://188.131.129.220:5000/即可看到学生端的登录界面。同理，教师端(http://188.131.129.220:5000/teacher/)、管理员端(http://188.131.129.220:5000/admin/)访问相应的URL即可。
学生端登录界面
<注> vue 在nginx上面出现刷新后404错误
解决办法：
在nginx的配置文件中添加
location / {
root /usr/share/nginx/html/student;
index index.html index.htm;
try_files $uri $uri/ @router;
}
location @router {
rewrite ^.*$ /index.html last;
}
