苹果M1芯片安装nginx 并且部署vue项目步骤详解

 更新时间:2021年11月18日 08:38:09   作者:jacky张嘉琛  
在本篇文章里小编给大家整理了一篇关于苹果M1芯片安装nginx 并且部署vue项目步骤详解内容,有需要的朋友们可以跟着学习参考下。

brew安装nginx

苹果mac安装使用 brew 安装,如果brew没有安装的话,请到搜索其他地方。
执行命令

第一步当然是更新我们的brew库,可以认为这个玩意就是个软件仓库,类似于安卓市场,苹果appStore

brew update

第二步直接查找我们的brew库中有没有nginx这个玩意儿

brew search nginx

正常会出现如图情况

如果出现,证明库中已经有了,直接进行安装命令

brew install nginx

安装完 只要没有报错,你的nginx就是已经安装成功了。。。

mac环境下的nginx对应路径

首先肯定是要知道我们的nginx常用的路径,我已经列出来了

说明 路径
nginx配置路径(conf等文件) /usr/local/etc/nginx
nginx上面部署的项目放包地址 /usr/local/etc/nginx/servers
nginx中的日志 /usr/local/var/log/nginx
nginx中访问默认首页地址 /usr/local/var/www

编辑nginx对应的nginx.conf文件,对应我们上面说到的配置路径

#user  nobody;
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;



    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;
	client_body_buffer_size 10m;
	client_max_body_size 20m;
    #gzip  on;

    server {
        listen       80;
        server_name  localhost;
        location / {
            root   /usr/local/etc/nginx/servers/html;
            index  index.html;
            try_files $uri $uri/ /index.html;
        }
        location /api {
           proxy_pass http://localhost:18080/api;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           set $Real $http_x_forwarded_for;
           if ( $Real ~ (\d+)\.(\d+)\.(\d+)\.(\d+),(.*) ){
                set $Real $1.$2.$3.$4;
          }
          proxy_set_header X-Real-Ip $Real;
        }
}

有个细节特别需要注意,如果你的root不是绝对路径的话,可能访问不到

在这里插入图片描述

网上大部分都是相对路径,我不知道是什么问题,我本地不行,要用绝对路径,上面路径的那个servers/html 的那个东西就是你的vue项目npm run build 命令后的dist包,解压后放到这个路径就行了,名字一定要和你nginx配置文件的路径对应

最后大结局

最终就是启动nginx了,直接终端命令输入

nginx

如果要指定你启动的nginx.conf文件

nginx -c /跟路径

停止nginx

nginx -s stop

重启nginx

nginx -s reload

到此这篇关于苹果M1芯片安装nginx 并且部署vue项目的文章就介绍到这了,更多相关苹果M1芯片安装nginx 并且部署vue项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 通过Nginx搭建Tomcat9集群并实现Session共享

    通过Nginx搭建Tomcat9集群并实现Session共享

    这篇文章主要介绍了通过Nginx搭建Tomcat9集群并实现Session共享,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • 查看nginx配置文件路径和资源文件路径的方法

    查看nginx配置文件路径和资源文件路径的方法

    这篇文章主要介绍了查看nginx配置文件路径和资源文件路径,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-11-11
  • Nginx Rewrit实现网页跳转功能详细步骤

    Nginx Rewrit实现网页跳转功能详细步骤

    Rewrite主要实现url地址重写,以及重定向,就是把传入web的请求重定向到其他url的过程,这篇文章主要介绍了Nginx Rewrit实现网页跳转功能详细步骤,需要的朋友可以参考下
    2024-02-02
  • nginx部署vue页面白屏或刷新404问题解决

    nginx部署vue页面白屏或刷新404问题解决

    最近部署vue项目后发现刷新页面会404,本文就来介绍一下nginx部署vue页面白屏或刷新404问题解决,具有一定的参考价值,感兴趣的可以了解一下
    2023-10-10
  • Nginx支持websocket的配置详解

    Nginx支持websocket的配置详解

    本文主要介绍了Nginx支持websocket的配置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • windows系统安装配置nginx环境

    windows系统安装配置nginx环境

    这篇文章介绍了windows系统安装配置nginx环境的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • Nginx转发socket端口配置详解

    Nginx转发socket端口配置详解

    这篇文章主要介绍了Nginx转发socket端口配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • Nginx 禁止访问某个目录或文件的设置方法

    Nginx 禁止访问某个目录或文件的设置方法

    如果基于WEB根目录下,要禁止用户访问/config目录,或者要禁止用户访问/config.ini(ZF常用INI,不过建议还是放到WEB目录以外的地方),可以通过location进行配置,返回403或者404等
    2010-09-09
  • nginx配置https的方法示例(免费证书)

    nginx配置https的方法示例(免费证书)

    这篇文章主要介绍了nginx配置https的方法示例(免费证书),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • Mac中使用Nginx实现80端口转发8080端口

    Mac中使用Nginx实现80端口转发8080端口

    端口转发(Port forwarding),有时被叫做隧道,是安全壳(SSH) 为网络安全通信使用的一种方法。端口转发是转发一个网络端口从一个网络节点到另一个网络节点的行为,其使一个外部用户从外部经过一个被激活的NAT路由器到达一个在私有内部IP地址(局域网内部)上的一个端口
    2017-09-09

最新评论