java vue 前后端 docker 部署

服务器docker 容器部署

前端需要的镜像：
nginx
node
后端需要的镜像：
mysql
redis
部署步骤地址：https://www.runoob.com/docker/docker-install-nginx.html

start-up.sh 运行java前后端脚本

// 后端拉取代码部署

cd /var/www/html/manager/docker_performance_appraisal/performance_appraisal // 后端代码地址
git pull // git 拉取代码
mvn clean package -f ruoyi/pom.xml // java打包
kill -9 `cat performance_appraisal.pid` //关闭java 程序
java -jar ruoyi/target/performance_appraisal.jar &  // 运行java 程序

// 前端docker 容器部署
docker-compose -f ruoyi-ui/docker-compose.yml build //构建(重新构建项目中的服务容器)
docker-compose -f ruoyi-ui/docker-compose.yml stop // 停止容器
docker-compose -f ruoyi-ui/docker-compose.yml up -d //  在后台运行服务容器

docker-compose.yml

version: "2.0"
services:
  game_analyse_service:#自定义名称
    container_name: geme_analyse_dg  #自定义容器名字
    build:
      context: ../ruoyi-ui// 前端地址 指定设定上下文根目录，然后以该目录为准指定Dockerfile
      dockerfile: Dockerfile  // 运行dockerfile 文件
    ports:
      - '8098:8098'//前端端口 #端口映射
    volumes:
      - ../ruoyi-ui:/ruoyi-ui// 前端地址映射
    restart: always

Dockerfile

FROM node:lts-alpine as build-stage  			//拉取nodejs镜像 最新node 基础版node镜像注意 node npm node-sass 版本不匹配
RUN mkdir /ruoyi-ui; 			//容器中创建app目录
WORKDIR /ruoyi-ui 				//创建ruoyi-ui目录
COPY package*.json ./ 				//复制打包相关的json文件到当前文件下
RUN npm config set registry https://registry.npm.taobao.org //设置淘宝源为cnpm（加快install的速度）
RUN npm install //install项目
COPY . . 						//复制所有依赖到当前文件下
RUN npm run build					//将项目打包

FROM nginx:stable-alpine				//拉取nginx镜像
COPY --from=build-stage /ruoyi-ui/dist /usr/share/nginx/html	//复制dist文件到指定目录
#COPY ./dist /usr/share/nginx/html			//复制dist文件到指定目录
COPY ./config/nginx /etc/nginx/conf.d			//复制nginx配置文件到/etc/nginx/nginx.conf
EXPOSE 8098 					//前端端口
CMD ["nginx", "-g", "daemon off;"]			//设置nginx启动命令

nginx.conf

  server {
      listen      8098;//前端地址
      server_name game-analyse.shiyculture.com //服务器地址
      charset     utf-8;
      client_max_body_size 200m;
      proxy_connect_timeout 10080s;
      proxy_send_timeout 1800s;
      proxy_read_timeout 1800s;
      keepalive_timeout 1800;

    location / {
        root /usr/share/nginx/html; // 前端vue 打包dis地址 
        try_files $uri $uri/ /index.html;
        index index.html;

     	  client_max_body_size 200m;
        client_body_buffer_size 2000k;
        server_tokens off;
        tcp_nopush on;
        tcp_nodelay on;
        gzip on;
        gzip_disable "msie6";
        gzip_buffers 32 4k;
        gzip_comp_level 6;
        gzip_min_length 200;
        gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
        gzip_vary on;
        proxy_connect_timeout 10080s;
        proxy_send_timeout 10080;
        proxy_read_timeout 10080;
        proxy_request_buffering off;
        proxy_buffering off;
	      keepalive_timeout 1800;
    }

      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;
        proxy_pass http://game-analyse.shiyculture.com:8099/;//后端地址
      }

      error_page   500 502 503 504  /50x.html;
      location = /50x.html {
          root   html;
      }
  }

vue – package.json

scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",//部署文件
    "build:prod": "vue-cli-service build",

  "devDependencies": {
    "node-sass": "^4.9.0",

注意 node npm node-sass 版本不匹配