使用 Nginx部署前端项目

原创

已于 2023-05-23 17:11:03 修改 · 3.4k 阅读

标签

#前端

收录于

于 2023-05-23 17:09:16 首次发布

本文介绍了在Windows上下载并配置Nginx服务器的过程，包括修改`nginx.conf`文件以监听8080端口，设置服务器根目录为前端项目路径，并通过`proxy_pass`代理到指定API服务。同时，文章提到了检查Nginx是否启动的方法，以及配置更改后的重启操作和错误排查步骤。

一，下载Nginx

以windows版为例，下载后，将其解压到本地的任一目录下；
我放到了D盘，新建一个software文件夹，把解压的文件放在里面，此时我们可以看到有如下目录

然后用vscode代码编辑器打开解压文件夹下的conf文件夹的nginx.conf文件，这是一个非常重要的文件，用来配置nginx服务器，默认的配置也存放在此。

二，配置nginx服务器

改动只有这里，添加一些server信息

 server {
        listen 8080;
        server_name localhost;
        index index.html index.htm;
        root E:/vue3/admin-template/JcCloudWeb/;   #前端代码打包构建好的存放路径       
            error_page 404 /index.html; #这个配置，预防页面刷新后跳转到404页面      
        location /api {
            proxy_pass http://fz.dev.whjiace.net:8000/api;
            proxy_set_header X-For