Nginx部署Vue前端项目

news2024/10/2 6:34:55

系统环境:Mac Pro—10.15.7版本

Nginx版本:1.19.6

一、安装Nginx

brew install nginx

1、安装完成

Nginx的配置文件目录:/usr/local/etc/nginx

Nginx的安装目录:/usr/local/Cellar/nginx

2、启动Nginx

brew services start nginx

3、问题

可能遇到的报错一:nginx: [error] open() "/usr/local/var/run/nginx.pid" failed (2: No such file or directory)

解决:原因是默认nginx主配置文件位置与你当前不一样。使用终端进入到Nginx安装位置,然后输入 【./nginx -h】 即可查看

 找到-e filename那一栏,将default后面的路径复制下来,然后使用命令指定nginx.conf文件的位置:

【./nginx -c /usr/local/etc/nginx/nginx.conf】,之后输入命令重新加载:【./nginx -s reload】即可。

二、修改Nginx配置文件

打开Nginx配置文件:/usr/local/etc/nginx/nginx.conf

需要修改3处,下面的配置文件中已添加注释,查看“注意”开头的说明

  1. root后面的前端打包好的文件路径;
  2. location后面的映射路径,该路径为服务端Swagger配置的pathMapping值;
  3. proxy_pass后面的本机ip地址;
#user  nobody;
worker_processes  1;

#pid        logs/nginx.pid;
pid        /usr/local/Cellar/nginx/1.19.6/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       80;
        server_name  localhost;
        charset utf-8;

        #access_log  logs/host.access.log  main;

        #注意:修改root后面的地址为你打包好的dist文件夹前端项目路径
        location / {
            root   xx/yy/zz/dist;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

        #注意:/prod-api/ 为你的服务端Swagger中配置的pathMapping属性值
        #注意:修改proxy_pass后面的地址为你部署机器的ip地址,切记端口号后面斜杠不要去掉【/】
        location /prod-api/ {
            proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://0.0.0.0:8081/;
		}

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

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        #省略.......
    }

    include servers/*;
}

配置好后输入命令重新加载【./nginx -s reload】。

之后在浏览器输入本机ip地址即可访问,注意:如果服务端的端口号为80开头,ip地址后面不加端口号

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/54502.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux虚拟机共享文件夹不显示问题终极解决方法

打开共享文件夹处查看一下,我的结果如下图(没有显示共享文件内容): 接着打开终端: 输入命令:没有共享目录显示 解决方法: 输入:sudo apt-get install open-vm-tools 等待安装完 …

音乐在线教育解决方案,打造在线教育高品质教学体验

音乐是一种在时间中流动的形态,有节奏的音乐,能给人带来心理的快乐和艺术的享受,学一门乐器成为了很多人的选择。因此,音乐教育培训机构在搭建线上音乐课程时,就需要选择低延时、高同步、画质还原、高保真的技术方案&a…

基于轻量级CNN的12306验证码识别分析系统

在我很早的一篇文章中有写过图标型验证码识别的实践项目,这里主要是基于以往的实践经历做出的技术升级,包括:模型轻量化、界面开发、Grad-CAM热力图集成等。 话不多说,首先看效果: 基于CNN的轻量级12306验证码识别分析…

用Python预测世界杯球赛结果,还别说准确度还是蛮高的

前言 那么四年一度的世界杯即将要在卡塔尔开幕了,对于不少热爱足球运动的球迷来说,这可是十分难得的盛宴,而对于最后大力神杯的归属,相信很多人都满怀着期待,每个人心中都有不同的答案。 今天我就通过Python数据分析…

Word控件Spire.Doc 【图像形状】教程(10): 如何在C#中重置word文档的形状大小

Spire.Doc for .NET是一款专门对 Word 文档进行操作的 .NET 类库。在于帮助开发人员无需安装 Microsoft Word情况下,轻松快捷高效地创建、编辑、转换和打印 Microsoft Word 文档。拥有近10年专业开发经验Spire系列办公文档开发工具,专注于创建、编辑、转…

SEO优化之扁平化目录结构PbootCMS

在网站内部优化中,扁平化的目录结构对于一个网站来讲是非常有意义的。我们经常看到一些网站结构混乱,搞的你都不知道哪里是哪里了。而有的网站结构非常清晰,这样用户喜欢,搜索引擎也喜欢。而PbootCMS 2.0开始,系统也默…

2022,开发转测试,会不会后悔?

每个人做任何选择都是趋利避害的,当选择了认为对自己更有利的选择后,发现结果和期望不符,甚至发现大失所望,才会出现后悔的情绪。 那么为什么开发转测试就会后悔呢,只有一个原因: 那就是转到测试行业后&a…

PIL+pyplot+transforms.ToTensor+unsqueeze+div

目录PIL & pyplottransforms.ToTensortorch.unsqueeze(input,dim,outNone)torch.squeeze(input, dimNone, outNone)torch.divPIL & pyplot from PIL import Image import matplotlib.pyplot as plt from torchvision import transforms# PIL打开图片 img_PIL Image.o…

面试华为必备:华为18级技术官呕心沥血三年整理的 趣谈网络协议

华为是一个热门的互联网大厂,华为每年都要进很多新人,对于新人来说,那些高大上的技术是用不到的,反倒是非常需要这些基础的文档,有这些新手进步会快很多,搞清楚TCP IP协议栈,其他的学起来也就容…

运动规划问答 -路径规划

1、Dijstra算法,算法流程 关键 初始化: 算法是基于图搜索的思想,所以需要先构建一个图,图中不包含障碍物,读入起点和终点信息,设置一个以代价作为键值排序的multiMap,起点入队,并设…

搜索技术——遗传算法

如果有兴趣了解更多相关内容,欢迎来我的个人网站看看:瞳孔空间 一:进化与遗传的概念 拉马克(Lamarck)进化论: 一切物种都是其他物种演变和进化而来的,而生物的演变和进化是一个缓慢和连续的过程环境的变化能够引起生…

Qwt开发笔记(一):Qwt简介、下载以及基础demo工程模板

若该文为原创文章,转载请注明原文出处 本文章博客地址:https://hpzwl.blog.csdn.net/article/details/128146985 红胖子(红模仿)的博文大全:开发技术集合(包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软…

设计模式之观察者模式(十四)

目录 1. 背景 1.1 天气预报项目 2. 观察者模式 2.1 观察者模式解决天气预报项目 2.2 观察者模式在JDK中应用 1. 背景 1.1 天气预报项目 天气预报项目需求,具体要求如下: 气象站可以将每天测量到的温度,湿度,气压等等以公告的形式发布出去…

ASEMI整流桥KBL406参数,KBL406规格,KBL406封装

编辑-Z ASEMI整流桥KBL406参数: 型号:KBL406 最大重复峰值反向电压(VRRM):600V 最大RMS电桥输入电压(VRMS):420V 最大直流阻断电压(VDC):600…

完全免费、开源的Flutter架构来了;开发者做好准备了吗?

Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面 一份代码可以同时生成 iOS 和 Android 两个高性能、高保真的应用程序 Flutter 目标就是使开发人员能够交付在不同平台上都感觉自然流畅的高性能应用程序,并且兼容 滚…

萤火虫模糊回归算法(Matlab代码实现)

🍒🍒🍒欢迎关注🌈🌈🌈 📝个人主页:我爱Matlab 👍点赞➕评论➕收藏 养成习惯(一键三连)🌻🌻🌻 🍌希…

FA-Phe-Gly-Gly,64967-39-1

Substrate for a continuous spectrophotometric assay of human angiotensin I-converting enzyme (ACE). Enzymatic cleavage of FAPGG yields FA-Phe-OH and H-Gly-Gly-OH. 连续分光光度法测定人血管紧张素i转换酶(ACE)的底物。酶法裂解FAPGG产生fa - pheo - oh和H-Gly-Gly-…

Kamiya丨Kamiya艾美捷抗-C-Myc,多克隆说明书

Kamiya艾美捷抗-C-Myc,多克隆化学性质: 程序:鸡用C-Myc免疫与KLH缀合的肽。多次之后用弗氏佐剂免疫收集。使用固定在固体上的肽对抗体进行免疫亲和纯化阶段 规范: ELISA:抗体特异性通过针对与BSA缀合的肽的ELISA。A…

在微信小程序里引入Vant Weapp组件库详细步骤

1. 新建一个文件夹。 2. 使用微信开发者工具 选择一个模板(这里以javaScript 基础模板 为例) 选择完模板之后如下: 2. 右键打开终端:按如下步骤执行命令。 ① npm init 解释:执行 npm init 需要在当前文件夹下的DOS窗口执行或者VS code里面…

Springboot策略模式实现文件上传功能(Windows/Linux本地,oss,cos)

1&#xff1a;首先配置pom依赖&#xff1a; <!-- 阿里云oss--><dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.8.0</version></dependency><!-- 腾讯云cos-->…