如何给Vue项目配置好一个nginx.conf文件?

如何给Vue项目配置好一个nginx.conf文件?

一般前端项目中,会有一个docker/nginx/nginx.conf文件,用于配置DockerFile配置等。

请添加图片描述

那么,如何给项目写好一个nginx.conf文件,以DockerFile为例:

# 使用 Node.js 镜像 , as build 别名构建阶段
FROM node:14 AS build
# 指定构建目录
WORKDIR /holmes-center-front
# 复制 package.json 和 package-lock.json
COPY package*.json ./
# 安装项目依赖
RUN npm install
# 将宿主机的所有文件,放到指定的WORKDIR工作目录里面来
COPY . .
# 执行 npm run build:prod 命令
RUN npm run build:prod# 使用官方的 Nginx 镜像
FROM nginx:latest
# 将宿主机的 nginx.conf 文件复制到容器中的 /etc/nginx/ 目录
COPY docker/nginx/nginx.conf /etc/nginx/nginx.conf
# 从第一build阶段获取dist下的文件移动到容器中的 /usr/share/nginx/html/ 目录
COPY --from=build /holmes-center-front/dist /usr/share/nginx/html/
# 暴露 Nginx 监听的端口,一般为 80,但这里因为是https协议所以要暴露443端口!
EXPOSE 443
# 启动 Nginx 服务
CMD ["nginx", "-g", "daemon off;"]
  1. 首先,要有一个nginx.conf文件原型,根据自己配置的nginx版本去官方拉取、通过docker创建个容器copy一下也可以。
    • 第一种方式:直接修改nginx.conf文件,替换nginx.conf文件,上面采用的就是这种方式,无论什么配置直接都在nginx.conf文件操作即可。
    • 第二种方式:也可以通过include /etc/nginx/conf.d/*.conf;配置,单独配置。一般用来配置server等。
      请添加图片描述
  2. 确定需要的配置,需要几个进程、几个server、监听的端口是多少、location该怎么配置等。
user  nginx;
worker_processes  1;error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;events {worker_connections  1024;
}http {include       /etc/nginx/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  /var/log/nginx/access.log  main;sendfile        on;# tcp_nopush     on;keepalive_timeout  65;client_max_body_size 8M; # 根据实际情况设置更大的值large_client_header_buffers 4 32k; # 根据实际情况设置更大的值# gzip  on;server {listen       443;server_name  www.holmesfront.com;index  index.html index.htm;error_page  404              /404.html;error_page  500 502 503 504  /50x.html;# 生产环境location /prod-api/ {# 由于报错:431 请求头过大,所以暂时注释以下内容# 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;rewrite ^/prod-api(/.*)$ $1 break;# 根据 微信云托管环境变量 配置proxy_pass https://www.holmesserver.com/;}location = /login {return 301 /index.html;}location / {root /usr/share/nginx/html;try_files $uri $uri/ /index.html;index  index.html index.htm;}location = /50x.html {root   /usr/share/nginx/html;}}include /etc/nginx/conf.d/*.conf;}
  1. 下面说几个特别容易忽视的问题:

    端口号 和 协议:搞明白你是http还是https,一个80端口一个443端口。

    • 平时配置80端口配置多了就容易忽视。这次配置微信云托管,给予的就是443端口,无论是微信云托管、DockerFile还是Nginx.conf一般默认暴露的端口都是80端口,没注意,排查了好久。。。才发现这个问题,纯属浪费时间。

    try_files 指令:用于在文件系统中查找文件,并在找不到文件时执行指定的操作。在上下文中,try_files $uri $uri/ /index.html; 的作用如下:

    • $uri: 首先尝试匹配请求的 URI 对应的文件。如果该文件存在,Nginx会直接返回该文件。
    • $uri/: 如果上述步骤未成功,尝试查找与请求 URI 相关联的目录。如果找到目录,Nginx会尝试使用默认的索引文件(通常是 index.html)。如果找到目录并存在索引文件,Nginx会返回该文件。
    • /index.html: 如果前两步都失败,最后一步是将请求重定向到 /index.html。这通常用于单页应用(SPA)的路由,就是Vue等单页面应用用的很多,其中前端路由负责处理路径,而后端始终返回主页。

🚨Tips:不配置try_files,像Vue的前端路由就不会起作用,nginx配置对应的location只会检索本地或者代理服务器。

SPA 的路由,就是Vue等单页面应用用的很多,其中前端路由负责处理路径,而后端始终返回主页。

🚨Tips:不配置try_files,像Vue的前端路由就不会起作用,nginx配置对应的location只会检索本地或者代理服务器。

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

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

相关文章

《辐射4》是一款什么样的游戏 怎样在mac电脑上玩到《辐射4》辐射4攻略 辐射4开局加点 怎么在Mac电脑玩Steam游戏

辐射4(Fallout 4)是由Bethesda开发的一款动作角色扮演类游戏,为《辐射》系列游戏作品的第四代,于2015年11月10日发行。游戏叙述了主角一家在核爆当天(2077年10月23日),被Vault-Tec(避…

Spring Cloud Gateway核心之Predicate

路由 Predicate 工厂 Spring Cloud Gateway 将路由作为 Spring WebFluxHandlerMapping基础设施的一部分进行匹配。Spring Cloud Gateway 包含许多内置的路由Predicate 工厂。所有这些谓词都匹配 HTTP 请求的不同属性。多个 Route Predicate Factory 可以组合,并通过…

Android Studio中debug功能详解

本文为大家分享了Android Studio debug功能的具体使用方法,供大家参考,具体内容如下 运行debug模式 \1. 进入debug – 点击图中红色圆圈圈起的左边绿色按钮,运行app的debug模式,快捷键ShiftF9 – 点击图中红色圆圈圈起的右边按…

【技术分享】求取列表需求的redis缓存方案

为了在Redis中实现一个高效的排行榜列表缓存方案,你可以使用有序集合(sorted set,即上文提到的zset)来存储产品的排行,同时使用散列(hash)来存储每个产品的相关信息。这样,你可以快速…

[数据结构初阶】栈

各位读者老爷好,鼠鼠我好久没写博客了(太摆烂了),今天就基于C语言浅介绍一下数据结构里面的栈,希望对你有所帮助吧。 目录 1.栈的概念及结构 2.栈的实现 2.1定义栈 2.2.初始化栈 2.3.入栈 2.4.出栈 2.5.获取栈…

c++中list的简单实现

文章目录 list介绍节点类(listNode)__list__iterator(迭代器类)operator-> list的成员函数empty_init() 初始化节点list(list<T>& lt) 拷贝构造clear() 清除链表~list() 析构insert() 插入erase() 删除push_back() 尾插push_front() 头插pop_back() 尾删pop_front…

zabbix监控中间件服务

zabbix监控Nginx 自定义nginx访问量的监控项&#xff0c;首先要通过脚本将各种状态的值取出来&#xff0c;然后通过zabbix监控。找到自定义脚本上传到指定目录/etc/zabbix/script/ 在zbx-client客户端主机操作 #创建目录&#xff0c;然后将脚本上传到该目录mkdir /etc/zabbix/…

C# Dictionary<string, string> 对key做筛选

​ 工作中遇到了一个筛选Dictionary的Key的需求&#xff0c;记录一下。 场景&#xff1a;筛选出所有不包含点&#xff08;.&#xff09;的键。 备选方法&#xff1a; 直接使用for循环遍历&#xff0c;代码量较大。 使用Linq。 最终方法&#xff1a; 选择使用Linq的where…

【JS】关于this的使用

this 前言一、this是什么&#xff1f;二、做什么&#xff1f;1.全局环境2.函数环境3.new实例对象4.apply、bind、call绑定4.1 apply()4.2 call()4.3 bind() 三、为什么用this&#xff1f;四、如何改变this&#xff1f;五、应用场景&#xff1f;总结 前言 痛点 经常写Vue项目&a…

2023 年 3 月青少年软编等考 C 语言一级真题解析

目录 T1. 字符长方形思路分析 T2. 长方形面积思路分析 T3. 成绩等级转换思路分析 T4. 机智的小明思路分析 T5. 寻找特殊年号思路分析 T1. 字符长方形 给定一个字符&#xff0c;用它构造一个长为 4 4 4 个字符&#xff0c;宽为 3 3 3 个字符的长方形&#xff0c;可以参考样例…

C++单例模式、工厂模式

一、单例模式 (一) 什么是单例模式 1. 是什么&#xff1f; 在系统的整个生命周期内&#xff0c;一个类只允许存在一个实例。 2. 为什么&#xff1f; 两个原因&#xff1a; 节省资源。方便控制&#xff0c;在操作公共资源的场景时&#xff0c;避免了多个对象引起的复杂操作…

Unity的相机跟随和第三人称视角二

Unity的相机跟随和第三人称视角二 展示介绍第二种相机模式远离代码总结 展示 我录的视频上可能看不太出来&#xff0c;但是其实今天的这个方法比原来写的那个方法更简便并且死角更少一些。 这里我也做了两个人物偏移的视角&#xff0c;按Q是原来的两个相机模式切换&#xff0c…

论文阅读笔记 | MetaIQA: Deep Meta-learning for No-Reference Image Quality Assessment

文章目录 文章题目发表年限期刊/会议名称论文简要动机主要思想或方法架构实验结果 文章链接&#xff1a;https://doi.org/10.48550/arXiv.2004.05508 文章题目 MetaIQA: Deep Meta-learning for No-Reference Image Quality Assessment 发表年限 2020 期刊/会议名称 Publi…

BSD-3-Clause是一种开源软件许可协议

BSD-3-Clause是一种开源软件许可协议&#xff0c;也称为BSD三条款许可证。它是BSD许可证家族中的一种&#xff0c;是一种宽松的许可证&#xff0c;允许软件自由使用、修改和重新分发&#xff0c;同时也保留了一些版权和责任方面的规定。 BSD-3-Clause许可证的主要特点包括以下…

Marin说PCB之POC电路layout设计仿真案例---01

最近娃哈哈饮料突然爆火&#xff0c;看新闻后才知道春晚的的时候宗老已经病的很严重了&#xff0c;现在也已经离我们而去了&#xff0c;宗老是一个值得我们尊敬爱戴的伟大企业家。于是乎小编我立马去他们的直播间买了一箱娃哈哈AD钙奶支持一下我们的国货。 中午午休的时候&…

vue3中全局变量的定义和获取

在vue项目中&#xff0c;我们知道vue2定义全局变量是在main.js文件将变量挂载到vue.prototype.name"lisi"&#xff0c;在页面通过this.name去调用。但是在vue3中&#xff0c;这个定义全局变量有所改变&#xff1a; const app createApp(App) app.config.globalProp…

Excel如何开启VBA进行二次开发

经常使用Excel做数据分析的朋友平时用的比较多的可能只是一些常用的内置函数或功能&#xff0c;比如求和函数、字符串分割函数、分类汇总、IF函数、VLOOKUP函数等。大多数人认为Excel强大是因为内置了大量的函数。其实&#xff0c;作为一名资深程序猿&#xff0c;个人认为&…

testvue-page

1403.vue <template><div class"error-page"><div class"error-code">4<span>0</span>3</div><div class"error-desc">啊哦~ 你没有权限访问该页面哦</div><div class"error-handle&q…

面试中最常问的10大Linux命令

引言 在信息技术领域中&#xff0c;对于Linux操作系统的精通已成为众多职位的基本要求&#xff0c;尤其对于系统管理员、DevOps工程师、后端开发者等角色更是至关重要。在这篇文章中&#xff0c;我们将深入探讨面试环节中频繁出现的10个核心Linux命令&#xff0c;结合其原理、…

kafka消费端消息去重方案

背景 我们在日常工作中&#xff0c;消费kafka消息是一个最常见的操作&#xff0c;不过由于kafka队列中经常包含重复的消息&#xff0c;并且消息量巨大&#xff0c;所以我们消费端总是需要先把消息进行去重后在消费&#xff0c;以减少消费端的压力&#xff0c;那么日常中我们一…