Mac环境Nginx配置和访问本地静态资源

本地开发有时候需要调试静态文件资源,无法直接访问,可以通过配置本地Nginx服务的方式来进行,顺便记录一下Nginx的配置步骤

安装

<!--通过 Brew 安装: -->
brew install nginx
<!--启动: -->
brew services start nginx
<!--查看配置: -->
cat usr/local/etc/nginx/nginx.conf
<!--编辑配置: -->
vi usr/local/etc/nginx/nginx.conf

Nginx命令:

<!--启动:-->
nginx

<!--停止/重启-->
nginx -s stop/start/restart

配置文件

文件地址: usr/local/etc/nginx/nginx.conf

# 此处配置为root owner才能访问root的静态文件,否则会报403
user root owner;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        # 监听端口
        listen       8080;
        # 绑定域名
        server_name  local.XXX.com;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        #文件路径和入口文件
        location / {
            root   /usr/local/var/www;
            index  index.html index.htm;
        }

        # 接口资源1
        location /XXXapi/ {
            proxy_pass https://api.XXX.com; 
        }
        # 接口资源2
        location /apiXXX/ {
            proxy_pass https://api.XXX.com; 
        }

        #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;
        }
    }

    include servers/*;
}

配置步骤

  1. 安装Nginx
  2. 通过SwitchHost绑定HOST (127.0.0.1 local.XXX.com)
  3. 配置端口和域名
# 监听端口
listen       8080;
# 绑定域名
server_name  local.XXX.com;
  1. 指定入口文件和静态文件路径
#文件路径和入口文件        
location / {            
  root   /usr/local/var/www;            
  index  index.html index.htm;        
}
  1. 如果有额外的API资源,通过proxy_pass绑定对应的API资源地址
# 接口资源1
location /XXXapi/ {
    proxy_pass https://api.XXX.com; 
}
# 接口资源2
location /apiXXX/ {
    proxy_pass https://api.XXX.com; 
}
  1. 将静态文件放入Nginx配置的文件路径
  2. DONE,本地可以通过对应的HOST打开静态网站资源并访问
原文链接:segmentfault.com

上一篇:第3讲 详解如何在项目里配置路由(1)
下一篇:大咖风采 | 中国出口信用保险公司的 DevOps 落地之道

相关推荐

  • 项目部署阶段nginx

    创建环境变量, 创建.env.production #这个前缀可以让nginx作反代 VUE_APP_BASE_API = '/api'改一下输出地址,vue.confifig.jsoutputD...

    6 个月前
  • 面试题:nginx有配置过吗?反向代理知道吗?

    这篇文章主要是针对跨域进行配置,如果大佬们会配置的话,就不用看了~简述反向代理和正向代理反向代理: 我们将请求发送到服务器,然后服务器对我们的请求进行转发,我们只需要和代理服务器进行通信就好,偷个图:...

    5 个月前
  • 阿里云部署 5.域名、DNS、nginx

    域名 虽然通过ip地址可以直接访问你的网站,但是我们很少看到网站是通过ip地址访问的,一般网站都会提供域名。域名直观易记,且在用户访问的域名不改变的情况下,解析的ip地址可以更改。

    1 年前
  • 阿里云服务器(centos)配置nginx及node环境部署

    1. 远程登录服务器 FTP客户端工具选择FileZilla 使用教程: 2. 配置nginx 使用阿里云服务器自带包管理器yum yum -y install nginx nginx启动目录:...

    1 年前
  • 配置nginx https

    生成数字证书和密钥 配置openssl.cnf(Mac OS用户打开/usr/local/etc/openssl目录,Windows用户请先下载openssl) 打开openssl.cnf文件(用记...

    14 小时前
  • 通过microtasks和macrotasks看JavaScript异步任务执行顺序 | 拓跋的前端客栈

    setTimeout(fn,0)的含义是,指定某个任务在主线程最早可得的空闲时间执行,也就是说,尽可能早得执行。它在”任务队列”的尾部添加一个事件,因此要等到同步任务和”任务队列”现有的事件都处理完,...

    3 年前
  • 通过Nginx解决网络隔离实践记录

    需求 最近需要迁移Node线上服务,于是新申请了两台线上服务器; 部署服务器后,需要验证服务是否正常,办公环境与线上环境网络是隔离的,无法直接访问;但是,线上服务器可通过部署服务器访问,而办公...

    5 个月前
  • 记录一下nginx和FTP的安装配置

    域名 域名注册好之后需要对域名进行解析,一般来说都是A类型解析,这没什么好说的 服务器 这个第一次自己搞,踩了很多坑,记录一下1,购买完成后先登录服务器ssh root@ip2,安装 nginx(Ce...

    4 个月前
  • 记一次nginx如何重新编译

    最近碰到最多的问题,每次部署nginx静态服务器,总是缺少gzip_static模块,该模块默认不会安装的。 借此记录一下如何每次重新编译安装好的nginx; 发现每次给新机器的运维同事,都不...

    7 个月前
  • 记一次Mac下java环境配置

    作为一个前端程序员在工作中也无法避免安装Java环境,毕竟总有的项目没有完全前后端分离;而且由于公司后端项目的原因,还用不了最新的JDK版本,因此在我安装最新版本Java环境的情况下需要更换sdk,着...

    1 年前

官方社区

扫码加入 JavaScript 社区