nginx简单部署前端项目

adminIvan

于 2024-06-28 19:56:23 发布

阅读量110

点赞数 2

文章标签： nginx 前端运维

本文链接：https://blog.csdn.net/l1965564484/article/details/140052037

版权

Nginx的安装

windows版

1、下载nginx

https://nginx.org/en/download.html下载稳定版本。

下载后解压如下：
请添加图片描述

2、配置nginx

将需要部署的前端页面放置html文件夹中，这里我将vue项目打包后生成的dist文件放到html中如图：
在这里插入图片描述
然后对conf文件中的nginx.conf进行配置：

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
        #项目首页index.html所在位置
            root   html/dist;
            index  /index.html;
        #解决项目刷新404问题
			try_files $uri $uri/ /index.html;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        # 反向代理,将请求为prod-api的请求转发到http://127.0.0.1:8080/解决跨域问题
        location /prod-api/ {
			proxy_pass   http://127.0.0.1:8080/;
            #proxy_pass   http://webservers/admin/;
        }
		

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }