使用nginx前后台项目打包发布

2024-06-03 05:16:05

使用nginx前后台项目打包发布：

进入前端项目：cd client
打包文件：npm run build
打包完成，生成dist目录（复制dist目录下的所有文件）

下载nginx
http://nginx.org/en/download.html
然后在nginx下载的目录中，运行：.\nginx.exe

在浏览器测试：http://localhost:80，提示：Welcome to nginx!

然后在nginx下载目录下，新建www目录 / 新建movie-info文件夹（dist目录中的内容，粘贴到这里）

百度搜索栏：nginxconfig.io

进入网页：选择：Reverse proxy选项，点击enabled

填写信息：
/api
http://127.0.0.1:3000
往下找，系统会自动生成代码：如下

reverse proxy
location /api {proxy_pass http://127.0.0.1:3000;include nginxconfig.io/proxy.conf;
}
注意：将上文的这段代码：include nginxconfig.io/proxy.conf;
替换为下面的这些代码。往下找：proxy.conf，代码自动生成proxy_http_version    1.1;
proxy_cache_bypass  $http_upgrade;proxy_set_header Upgrade          http_upgrade;
proxy_set_header Connection         "upgrade";
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 X-Forwarded-Proto  scheme;
proxy_set_header X-Forwarded-Host   host;
proxy_set_header X-Forwarded-Port   $server_port;
将上面的代码粘贴到这里：找到下载的nginx，找到nginx.config，打开文件：新增server信息

（注意监听端口有可能被占有）

host文件路径：C:\Windows\System32\drivers\etc

修改host文件：127.0.0.1 wdmovie123.com

测试域名：在下载的nginx目录下：ping wdmovie123.com -t
server {listen       8080;server_name  wdmovie123.com www.wdmovie123.com;location / {root   www/movie-info;index  index.html index.htm;}location /api/ {proxy_pass http://127.0.0.1:3000/;proxy_http_version  1.1;proxy_cache_bypass  $http_upgrade;proxy_set_header Upgrade          $http_upgrade;proxy_set_header Connection       "upgrade";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 X-Forwarded-Proto   $scheme;proxy_set_header X-Forwarded-Host   $host;proxy_set_header X-Forwarded-Port $server_port;}}
然后在浏览器：movie-info.com，就可以访问前端页面了，完美！！！

使用nginx前后台项目打包发布相关推荐

vue-router模式为history的项目打包发布后不能通过地址栏里的地址进行路由跳转
项目打包发布后不能通过地址栏里的地址进行路由跳转,地址栏里回车访问就直接404 本项目使用nginx发布,所以这里只有nginx的配置方式. 修改nginx的配置文件 server {listen 8 ...
SpringBoot系列三：SpringBoot基本概念（统一父 pom 管理、SpringBoot 代码测试、启动注解分析、配置访问路径、使用内置对象、项目打包发布）...
声明:本文来源于MLDN培训视频的课堂笔记,写在这里只是为了方便查阅. 1.了解SpringBoot的基本概念 2.具体内容在之前所建立的 SpringBoot 项目只是根据官方文档实现的一个基础程 ...
java restful项目打包_66-JT项目04(项目打包发布/JSON/项目业务)
关于项目打包/发布问题说明利用maven工具项目打包说明: 父级JT 其中包含了2个子级项目 jt-manager 依赖于jt-common.所以项目打包是有顺序的.要先打包被依赖的项目或者直接 ...
【Python】Python项目打包发布（一）（基于Pyinstaller打包多目录项目）
Python项目打包发布汇总 [Python]Python项目打包发布(一)(基于Pyinstaller打包多目录项目) [Python]Python项目打包发布(二)(基于Pyinstaller打包 ...
spring项目打包发布详细步骤
spring项目打包发布详细步骤 1.添加pom文件配置 <packaging>jar</packaging> 2.在IDEA中打开 Run - > Edit Confi ...
SpringBoot项目打包发布
SpringBoot项目打包发布 SpringBoot打包发布jar jar类型项目可以打成jar包打包流程导入SpringBoot打包插件将项目导出成jar包并更新pom文件使用maven ...
(三)01 -Vue项目打包发布移动App——vue.config.js中配置相对路径publicPath为空字符串在public中添加HBuilderX的打包配置文件manifest.json
Vue 项目打包发布移动 App--npm run build打包 & vue.config.js文件中配置相对路径publicPath为空字符串 & 在 public中添加HBuil ...
使用pyinstaller将python项目打包发布为exe可执行文件
pyinstaller模块用于将python项目打包发布成exe文件,以方便地在没有安装python环境的机器上运行.该模块使用 pip install pyinstaller 安装即可. 一.常用参 ...
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
vue+webpack创建的项目打包发布至服务器,页面空白及背景图片不显示问题解决一. 页面显示空白二. 背景图片不显示一. 页面显示空白解决方法: config > index.js ...

最新文章

热门文章