nginx部署前端项目时location时root和alias配置

这篇具有很好参考价值的文章主要介绍了nginx部署前端项目时location时root和alias配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

操作说明

1、nginx目录中html目录下放置green 前端项目
监听端口:8181

nginx配置文件配置location时使用root方式

	# root 方式
		#  方式1 域名直接可访问到  即 localhost:8181
		#location / {
        #    root   html;
        #    index  green/index.html green/index.htm;
        #}
		
		#  方式2 域名直接可访问到  即 localhost:8181
		#location / {
        #    root   html/green/;
        #    index  index.html index.htm;
        #}
		
		#  方式2.1 域名直接可访问到  即 localhost:8181
		#location / {
        #    root   html/green;
        #    index  index.html index.htm;
        #}

		# 方式3  域名+/green  可访问到  即 localhost:8181/green
        #location /green/ {
        #    root   html;
        #    index  index.html index.htm;
        #}
		
		# 方式3.1  访问不到green下任务资源
        #location /green/ {
        #    root   html/green/;
        #    index  index.html index.htm;
        #}

以上三种 方式结论验证 用root属性指定的值是要加入到最终路径中的,匹配条件会拼接到路径中

即最终获取的静态页面路径为:域名 + root + 区配条件 + index

即找到 localhost:8181/html/green/index.html

备注:方式2 和方式2.1 用于验证 root 属性的值最后的 “/“为非必须,有没有最后一个”/” 都可以访问到

nginx配置文件配置location时使用alias方式

# alias 方式
		#  方式1  域名直接可访问到  即 localhost:8181
		#location / {
        #    alias   html/green/;
        #    index  index.html index.htm;
        #}
		
		#  方式1.1  访问不到green下任务资源
		#location / {
        #    alias   html/green;
        #    index  index.html index.htm;
        #}
		
		#  方式2  域名直接可访问到  即 localhost:8181
		#location / {
        #    alias   html/;
        #    index  green/index.html green/index.htm;
        #}
		
		#  方式3  域名直接可访问到  即 localhost:8181/green
		#location /green {
        #    alias   html/green/;
        #    index  index.html index.htm;
        #}
		
		#  方式3.1  域名直接可访问到  即 localhost:8181/green
		#location /green/ {
        #    alias   html/green/;
        #    index  index.html index.htm;
        #}

以上三种 方式结论验证 用alias属性指定的值,匹配条件不会拼接到路径中,会直接在alias属性的值下面去找资源

即最终获取的静态页面路径为:域名 + alias + index

即找到 localhost:8181/html/green/index.html文章来源地址https://www.toymoban.com/news/detail-776909.html

备注:方式1 和方式1.1 用于验证 alias 属性的值最后的 “/“为必须,没有最后一个”/” 访问不到

完整的nginx配置文件如下


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

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
	
	map $time_iso8601 $logdate{
            '~^(?<ymd>\d{4}-\d{2}-\d{2})' $ymd;
            default 'date-not-found';
    }

    access_log  logs/access-$logdate.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8181;
        server_name  localhost;

        access_log  logs/access-$logdate.log  main;
		
		# root 方式
		#  方式1 域名直接可访问到  即 localhost:8181
		location / {
            root   html;
            index  green/index.html green/index.htm;
        }
		
		#  方式2 域名直接可访问到  即 localhost:8181
		#location / {
        #    root   html/green/;
        #    index  index.html index.htm;
        #}
		
		#  方式2.1 域名直接可访问到  即 localhost:8181
		#location / {
        #    root   html/green;
        #    index  index.html index.htm;
        #}

		# 方式3  域名+/green  可访问到  即 localhost:8181/green
        #location /green/ {
        #    root   html;
        #    index  index.html index.htm;
        #}
		
		# 方式3.1  访问不到green下任务资源
        #location /green/ {
        #    root   html/green/;
        #    index  index.html index.htm;
        #}
		
		# 以上三种 方式结论验证  用root属性指定的值是要加入到最终路径中的,匹配条件会拼接到路径中
		# 即最终获取的静态页面路径为:域名 + root + 区配条件 + index
		# 即找到 localhost:8181/html/green/index.html
		# 备注:方式2  和方式2.1 用于验证 root 属性的值最后的 "/"为非必须,有没有最后一个"/" 都可以访问到
		
	
	
		# alias 方式
		#  方式1  域名直接可访问到  即 localhost:8181
		#location / {
        #    alias   html/green/;
        #    index  index.html index.htm;
        #}
		
		#  方式1.1  访问不到green下任务资源
		#location / {
        #    alias   html/green;
        #    index  index.html index.htm;
        #}
		
		#  方式2  域名直接可访问到  即 localhost:8181
		#location / {
        #    alias   html/;
        #    index  green/index.html green/index.htm;
        #}
		
		#  方式3  域名直接可访问到  即 localhost:8181/green
		#location /green {
        #    alias   html/green/;
        #    index  index.html index.htm;
        #}
		
		#  方式3.1  域名直接可访问到  即 localhost:8181/green
		#location /green/ {
        #    alias   html/green/;
        #    index  index.html index.htm;
        #}
		# 以上三种 方式结论验证  用alias属性指定的值,匹配条件不会拼接到路径中,会直接在alias属性的值下面去找资源
		# 即最终获取的静态页面路径为:域名 + alias +  index
		# 即找到 localhost:8181/html/green/index.html
		# 备注:方式1  和方式1.1 用于验证 alias 属性的值最后的 "/"为必须,没有最后一个"/" 访问不到
		

        #  后台服务; 
        location /fdiagnose/ {
			proxy_ignore_client_abort   on;
			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://localhost:9090;
        }

    }

}

到了这里,关于nginx部署前端项目时location时root和alias配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【运维】Linux安装Nginx并部署前端项目的两种方式【内/外网-保姆级教程】

    目录 第一种方式 1准备nginx安装包并解压 2执行以下命令,安装nginx依赖包 3编译安装nginx 4验证安装 第二种方式 1下载所需要的安装包 2安装步骤 2.1将下载的完整文件夹通过压缩包的形式,上传到你的路径下解压. 2.2 进入到gcc文件夹下,执行命令: 2.3进入到gcc-c++文件夹下,执

    2024年02月04日
    浏览(51)
  • 【运维】手把手教你在Linux/Windows系统使用Nginx部署多个前端项目【详细操作】

            需求:项目上线需要将前端的前台和后台部署在服务器上提供用户进行使用,部署在不同的服务器直接在服务器安装nginx即可。但是在内网安装还是有点麻烦,因为需要联网,如果是内网可以参考Linux安装Nginx并部署前端项目【内/外网-保姆级教程】_MXin5的博客-CSDN博

    2024年02月08日
    浏览(61)
  • 【nginx】nginx中root与alias的区别:

    root与alias主要区别在于 nginx如何解释location后面的uri ,这会使两者分别以不同的方式将请求映射到服务器文件上。 root的处理结果是: root路径+location路径 alias的处理结果是: 使用alias路径替换location路径 alias是一个目录别名的定义,root则是最上层目录的定义 。还有一个重要

    2024年02月16日
    浏览(57)
  • nginx(七十一)root、alias、index、try_files关系指令再探

    一   root、alias、index、try_files辨析 ①  前言回顾 章神的博客 try_files基础知识  配置try_files实现内容重定向 root和alias指令辨析   index和autoindex指令回顾 absolute_redirect  absolute_redirect port_in_redirect 响应Location形式 try_files的语法规则 nginx 301重定向踩坑记录   深度硬核文:nginx的

    2024年01月17日
    浏览(42)
  • 理解nginx的 location 和root

    1.如果理解 location 和root 当用户输入 localhost:8080 / 时,首先会匹配到 location / 即 箭头1所指向 ,然后再去 root 下寻找根目录 /home/www 即 箭头2所指方向 , 总结来说当用户在浏览器输入 localhost:8080 / 时(当然你不加/也默认也是访问的也是根目录/),nginx 会向 本机的 /home/www / 寻找资源

    2023年04月08日
    浏览(35)
  • 【ubuntu】ubuntu 20.04安装docker,使用nginx部署前端项目,nginx.conf文件配置

    docker 官网:Install Docker Engine on Ubuntu 1.将apt升级到最新 2.使用apt安装 docker 和 docker-compose (遇到提示输入 y ) 3.将当前用户添加到docker用户组 4.运行hello-world 运行成功 1.修改配置文件 修改conf/nginx.conf 2.重新挂载 给容器设置自启动(如果提示就去掉sudo) 给docker设置开机自启动

    2024年01月20日
    浏览(57)
  • Unbutu系统-Docker安装、JDK环境配置,Docker常用指令、Docker安装MySQL、Redis、Tomcat、Nginx,前端后分离项目部署

    目录 1、防火墙 1.1、查看防火墙状态 1.2、开启防火墙 1.3、关闭防火墙 1.4、重启防火墙 1.5、查看防火墙版本 2、安装JDK 2.1、官网下载tar包 2.3、解压tar.gz文件 2.4、配置环境变量 2.4.1、查看安装路径 2.4.2、设置环境变量 2.4.3、执行该让环境变量生效 2.4.4、查看JDK版本 3、Docker

    2024年02月04日
    浏览(56)
  • nginx: 部署前端项目的详细步骤(vue项目build打包+nginx部署)

    目录 第一章 前言 第二章 准备工作 2.1 项目打包理解 2.1.1 打包命令 2.1.2 理解npm run serve/dev 和 npm run build命令 2.2 nginx参数配置理解 2.2.1 nginx常用基本命令 2.2.2 默认配置 2.2.3 搭建不同网站的站点 2.2.4 禁止访问的目录以及一键申请SSL证书验证目录相关设置 2.2.5 根据文件类型设置

    2024年02月04日
    浏览(59)
  • 使用nginx部署前端项目

    docker pull nginx docker images docker run --name nginx -p 8080:80 -d nginx:latest docker exec -it nginx /bin/bash mdkir /opt/nginx/conf mkdir /opt/nginx/html mkdir /opt/nginx/log docker rm -f nginx 说明: –name: 启动容器的名字 -d:后台运行 -p: 将容器的 端口映射到主机的端口 -v:挂载配置文件 在浏览器访问主机ip nginx安装

    2024年02月09日
    浏览(52)
  • nginx部署多个前端项目

    前提:nginx已在服务器上安装完成 假如有2个项目(一个company,一个test),需要通过ip或者域名来访问,我们通过http://www.test.com来举例 首先把2个静态资源项目或者打包好的项目放到Nginx中 在nginx的html里面 创建两个文件夹,一个services放服务端代码,一个web放前端代码 将前端

    2024年02月01日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包