windows使用

☞ windows下载这个版本

这里我下载的这个版本 // nginx/Windows-1.26.3  pgp
nginx-1.26.3.zip

下载完成以后解压到一个自己认识的地方,我本地的地址如下

// ☞ windows
D:\nginx

下载解压以后目录如下：

// ☞ windows
D:.
├─conf
├─contrib
│  ├─unicode2nginx
│  └─vim
│      ├─ftdetect
│      ├─ftplugin
│      ├─indent
│      └─syntax
├─docs
├─html
├─logs
└─temp

Mac安装使用

brew install nginx

//检查版本
ngxin -V

//查看nginx信息
brew info nginx

// 打开资源目录文件
open /opt/homebrew/var/www

//开启nginx
nginx

// 关闭nginx

//重新加载nginx 
nginx -s reload

// 查看Nginx配置文件
vim /opt/homebrew/etc/nginx/nginx.conf


// 配置nginx
/opt/homebrew/etc/nginx/html/dist

3、运行使用

☞ windows

打开文件夹目录，然后里面有一个nginx.exe文件，双击运行，这个时候有个一闪而逝的界面

打开地址栏 http://localhost/ 出现这个界面，就代表我们已经运行成功了

☞ 命令行运行

// 运行nginx
start nginx

☞ 查看是否运行

tasklist /fi "imagename eq nginx.exe" 

☞ 停止运行

关闭 cmd窗口是不能结束nginx进程 的，可使用两种方法关闭 nginx

（1）方式1

// 停止 Nginx
nginx -s stop

// 完整有序的停止nginx
nginx -s quit

（2）方式2

taskkill /f /t /im nginx.exe

☞ 重启 Nginx

nginx -s reload

Mac运行Nginx

// 编辑nginx
vim /opt/homebrew/etc/nginx/nginx.conf

// 重新加载
nginx -s reload

4、配置

nginx的配置文件是conf目录下的nginx.conf

打开conf 文件，里面有个nginx.conf文件，这个就是我们本地的nginx配置文件，接下来我们也配置这个文件从而达到对于我们本地服务器的更改

默认配置的 nginx 监听的端口为 80

项目部署

接下来我们把项目配置并且部署一下

接下来我们把我们项目部署到这个地方
D:\nginx\html\dist


//之前我们的项目地址是这样子
server {
      listen       80;
      server_name  localhost;
      location / {
          root   html;
          index  index.html index.htm;
      }
}

=> 更改一下

server {
      listen       8888;
      server_name  localhost;
      location / {
          root   html/dist;
          index  index.html index.htm;
      }
}

🗡** 检测自己配置是否正确**

nginx -t -c D:\nginx\conf\nginx.conf

// 配置正确
nginx: the configuration file D:\nginx\conf\nginx.conf syntax is ok
nginx: configuration file D:\nginx\conf\nginx.conf test is successful

查看项目

打开`http://localhost:8888/`,这个时候项目已经可以正常显示了

路由404配置

当我们前端路由使用的模式是

vue中history路由模式，部署后刷新页面404
hash路由模式则不需要，显示正常

配置下面这行代码👇 

try_files $uri $uri/ /index.html;



location / {
    try_files $uri $uri/ /index.html; # 解决vue中history路由模式，部署后刷新页面404问题，hash路由模式则不需要
    root   html/dist;
    index  index.html index.htm;
}

跨域配置

☞ 跨域配置放到http=> server => location 之中

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization';

5、完整配置

#user  nobody;
worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       8080;
        server_name  localhost;
        location / {
            try_files $uri $uri/ /index.html; # 解决vue中history路由模式，部署后刷新页面404问题，hash路由模式则不需要
            root   html/dist;
            index  index.html index.htm;
            charset utf-8;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

☞ 报错以及解决

☞ 端口占用

[emery] blind() to 0.0.0.0:80 failed 
(10013: An attempt was made to access a socket in a way forbidden by its 
access permissions)

意思就是我们默认的80 端口被占用了，关掉其他占用的端口即可

👉 提示403

Host配置

C:\Windows\System32\drivers\etc



127.0.0.1 www.sellercentral.amazon.com
127.0.0.1 www.sellercentral.amazon.com
127.0.0.1 www.sellercentral.amazon.co.uk

127.0.0.1 www.sellercentral.amazon.de
127.0.0.1 www.sellercentral.amazon.ca

nginx使用结束，后面继续优化进阶