本地spa应用的nginx简单配置

最近碰到一个棘手的问题，开发打包都没问题，发到线上页面不出来报错：Uncaught SyntaxError: Invalid or unexpected token，为了方便调试于是使用nginx起本地服务，记录一下nginx的简单配置

常用命令放在前面(windows没有配置nginx全局环境变量的话需要到nginx的解压目录下运行命令)

启动：start nginx、nginx
停止：nginx -s stop、nginx -s quit
重启：nginx -s reload
创建nginx.pid文件：nginx -c conf/nginx.conf。这条命令在使用停止启动命令报nginx报错[error] CreateFile()使用

下载与启动

下载地址https://nginx.org/en/download.html，页面有Mainline version(主版本)、Stable version(稳定版本)、Legacy versions(旧版本)可以下载。文章下载是稳定版，版本是nginx-1.20.1
将下载的压缩包解压到某个文件夹下
启动
- 直接双击nginx.exe启动
- 打开cmd命令窗口，切到nginx解压目录下使用nginx、start nginx启动
检查nginx是否启动成功
- 在浏览器地址栏输入网址http://localhost:80，出现Welcome to nginx!欢迎页面说明启动成功

配置一个简单的spa项目的server

编辑器打开nginx解压目录下/conf/nginx.conf配置文件，默认只有一个server配置内容
，这也是启动时欢迎页面的server配置

在现有的server配置下添加新的server

spa应用没有基路径的server配置，前端文件地址结构为项目地址/dist/index.html

    server {... // 这是当前默认server内容}server {listen 8888; // 监听的端口号server_name localhost;root ../[项目地址]/dist; // 前端包地址（这里基于解压后的nginx.exe所在地址使用的相对路径）location / {index /index.html;try_files $uri $uri/ /index.html; // spa应用的关键配置}location ^~ /api/ {# proxy_pass [接口代理地址]; // 接口代理地址}}

spa应用有基路径的server配置，如最后访问页面地址是localhost:8888/app/[route]，前端文件地址结构为项目地址/dist/index.html

    server {listen 8888; // 注意端口号不能重复server_name localhost;root ../[项目地址]/dist;location ^~ /app { // 添加访问地址的基路径index /index.html;try_files $uri $uri/ /index.html;}location ^~ /api/ {# proxy_pass [接口代理地址];}}

添加新的server配置后保存nginx.conf文件
使用nginx -s reload命令重启nginx，这时候就能访问http://localhost:8888/或http://localhost:8888/app/[route]查看对应的spa应用了

本地spa应用的nginx简单配置相关推荐

前后端联调的一般步骤和Nginx简单配置
前后端联调的一般步骤 1.创建前端工程(这里创建的是vue-cli项目) 2.编写后端登录业务 3.替换页面元素为自己需要的,比如图标,标题之类的 4.编写前端页面Vue组件 5.编写跳转到组件的路由 ...
nginx简单配置php服务（多个）
nginx简单配置php服务(多个) 摘要:大部分网站开发语言都要运行在服务器,比如主流的nginx.apache等等,部署服务器环境对于大部分人来说是比较陌生和复杂的,其实搞懂了之后是很简单易用的. ...
Nginx简单配置转发
问题分析一台服务器运行多个项目的时候会遇到这样的问题:如果使用同一个tomcat来启动不同项目的话,项目之间会相互影响:如果用多个tomcat运行项目,那么在访问项目的时候又不能都使用80端口,还要 ...
网络安全学习篇35_第二阶段_lnmp、Nginx简单配置+安装报错：C compiler cc is not found缺少环境解决、安装php5.3.28
上一篇博客:网络安全学习篇34_第二阶段_apache.mysql等配置+ centOS设置中文输入法目录 Nginx的简单介绍 Nginx的安装安装的时候报了一个错:C compiler cc ...
关于https工程的nginx简单配置
1.下载域名的ssl证书,由于项目部署在阿里云上,就用了阿里推荐的赛门铁克,用Let's Encrypt的也不错. 2.nginx的配置如下: worker_processes 8;error_log ...
【菜鸟dei学习】Nginx简单配置：负载均衡与动静分离
反向代理首先我们来说说***正向代理***.比如你要访问资源A,但是访问不到,你可以通过访问资源B,再通过它你访问到资源A,这即是正向代理.可能多个用户都通过资源B访问资源A,它隐藏了客户端的访问身 ...
nginx 简单配置
https的配置方法 #这个是接口文档的---------------------------------- server { #侦听80端口 listen 80; #定义使用 www.nginx.c ...
nginx简单配置代理服务器
最近遇到一个问题,一台服务器要部署一套系统,系统里有一个使用curl请求接口的地方,但是在这台服务器上,怎么都请求不到数据,而且也没有报什么错,请求一直超时.但是网上找的一些其他接口可以 .而且这个请 ...
LNMP架构环境搭建之PHP、Nginx源码编译安装及其简单配置应用
LNMP架构中的Mysql见上一篇博文"LNMP架构环境搭建之mysql源码编译安装" 一.PHP简介 PHP(外文名:PHP: Hypertext Preprocessor,中文 ...

本地spa应用的nginx简单配置

本地spa应用的nginx简单配置相关推荐

最新文章

热门文章