OJ前端部署文档

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="[email protected]"

  # 将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;
  }