前端利用Nginx部署

最新推荐文章于 2024-05-12 03:15:01 发布

游客o((>ω< ))o

最新推荐文章于 2024-05-12 03:15:01 发布

阅读量831

点赞数

分类专栏：解决方式文章标签： nginx 前端运维

本文链接：https://blog.csdn.net/qq_42563471/article/details/127227313

版权

解决方式专栏收录该内容

12 篇文章 0 订阅

订阅专栏

前端利用Nginx部署

说明：

运行环境：JDK1.8、Nginx1.18.0

（1）安装JDK

下载地址：https://www.oracle.com/java/technologies/downloads/#java8

选择适合操作系统的包进行下载，Windows系统直接双击.exe文件进行安装、Linux系统加压相应的压缩包。

i.配置环境变量：

Windows系统：

1) 新建用户变量：JAVA_HOME G:\Java\jdk1.8.0_131

在这里插入图片描述
2) 新增系统变量 CLASSPATH .; %JAVA_HOME%\lib; %JAVA_HOME%\lib\dt.jar; %JAVA_HOME%\lib\tools.jar （注意前面的.不能省略）

在这里插入图片描述
3) 修改系统变量 Path G:\Java\jdk1.8.0_131\bin;G:\Java\jre1.8.0_131; 注意前后分号。

在这里插入图片描述
4）CMD中输入javac和java -version，如图即安装成功。

在这里插入图片描述
Linux系统：

转载自：https://blog.csdn.net/Kiven_l/article/details/123324644

（2）启动后端服务架包

该架包是spring-boot项目

jar包目录下进入cmd，执行

start javaw -jar -Dspring.profiles.active=dev -Dfile.encoding=UTF-8 **-1.0-SNAPSHOT.jar > deploy.log

（3）安装Nginx

转载自：https://blog.csdn.net/javalingyu/article/details/124483646 （windows安装）

转载自: https://blog.csdn.net/qq_41070393/article/details/108026079 (linux安装)

（4）运行前端包

获取npm build构建后的文件dist目录下所有文件移动到nginx目录下html下

配置nginx.conf文件：

worker_processes  1;

events {
    worker_connections  1024;
}


http {
	 #必须设置，不然会布局混乱
	 include       mime.types;
     default_type  application/octet-stream;
		 #压缩设置
	 #gzip  on;
     #开启gzip压缩
     gzip on;
     #http的协议版本
     gzip_http_version 1.0;
     #IE版本1-6不支持gzip压缩，关闭
     gzip_disable 'MSIE[1-6].';
     #需要压缩的文件格式 text/html默认会压缩，不用添加
     gzip_types text/css text/javascript application/javascript image/jpeg image/png image/gif;
     #设置压缩缓冲区大小，此处设置为4个8K内存作为压缩结果流缓存
     gzip_buffers 4 8k;
     #压缩文件最小大小
     gzip_min_length 1k;
     #压缩级别1-9
     gzip_comp_level 4;
     #给响应头加个vary，告知客户端能否缓存
     gzip_vary on;
     #反向代理时使用
     gzip_proxied off;

	upstream dist {
		server localhost:9071;
	}
    server {
		#端口不可重复
        listen       9072; 
        server_name  localhost;

        root   html;

        # 配置vue刷新报404
		location / {
                try_files $uri $uri/ /index.html; #检测文件存在性重定向到首页目录    防止404
                index  index.html;
        }
        location @router {
                rewrite ^.*$ /index.html break;
        }

		location /api {
			proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header    X-Forwarded-For  $proxy_add_x_forwarded_for;
            proxy_set_header    HTTP_X_FORWARDED_FOR $remote_addr;
            proxy_set_header    X-Forwarded-Proto $scheme;
            #反向代理地址, 对应的是上面设置的upstream的名字。后面的/一定要有，不然接口会404
            proxy_pass http://dist/;

        }
    }
}