ruoyi-vue-plus-ui linux服务器部署

参考链接 ruoyi前后端分离框架部署云服务器(配步骤代码、截图)

本着从简的方式 后端直接java -jar启动了

这里介绍前端部署

ruiyi前端部署

前端部署条件 nginx跳转

  1. 安装docker
  2. docker安装nginx

第一步创建文件夹

mdkir -p /home/nginx/conf   /home/nginx/logs   /home/nginx/html

下载nginx

docker search nginx

docker pull nginx:latest

配置nginx.conf 文件 以便挂载


user  root;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
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;
     server {
        listen       80;
        server_name 120.26.196.113;		# 可以用服务器ip代替

        location / {
            root   /usr/share/nginx/html/dist/;     # 这里是对应挂载到docker内nginx的文件路径 无需修改
            index  index.html index.htm ;
            try_files $uri $uri/ /index.html;
        }
        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://120.26.196.113:8080/;		# 可以用服务器ip代替  对应后端配置的端口
        }
     }




配置完后 访问ip 就会映射到前端界面了

启动nginx

这里如果80端口占用了,你可以修改成其他的端口 80:80 前面的是主机端口 映射到docker内部的端口

docker run --name nginx01 -p 80:80 \
-v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /home/nginx/html:/usr/share/nginx/html \
-v /home/nginx/logs:/var/log/nginx \
-d nginx

迁移前端文件

打包 npm run build:prod
将打包的 /dist文件夹 放到创建的 home/nginx/home文件夹下

测试

然后访问 ip:port就可以看到 前端页面了

windows 配置

location /views/* {
			root   D:/nginx-1.23.1/h5;  绝对路径
			index  index.html index.htm;
			try_files $uri $uri/ index.html;
		}

    include /etc/nginx/conf.d/*.conf;
}

你可能感兴趣的:(服务器,linux,vue.js)