记录使用nginx部署静态资源流程,以及遇到的访问静态资源404问题

nginx部署静态资源

将网站静态资源(HTML,JavaScript,CSS,img等文件)与后台应用分开部署实现动静分离,提高用户访问静态代码的速度,降低对后台应用访问,减轻后台服务器的压力。

将静态资源文件static放在nginx文件目录中

请添加图片描述请添加图片描述
这里我选择放在了html文件夹下,(也可以放在和html文件夹同级,或其它位置

修改nginx配置文件

打开conf文件夹
请添加图片描述
打开总配置文件nginx.conf
在这里插入图片描述
找到server块中的location块
在这里插入图片描述
例如要访问静态资源中的这个图片

#http://gulimall.com/static/index/img/5a1e5ce2N034ce344.png

首先讲一下location块中root 和 alias的区别

root的处理结果是:root路径+location路径
alias的处理结果是:使用alias路径替换location路径

alias是一个目录别名的定义,root则是最上层目录的定义。还有一个重要的区别是alias后面必须要用"/"结束,否则会找不到文件的。。。而root则可有可无

两种写法
当访问路径匹配到 /static/ 时,
就会截取后面剩余的路径:index/img/5a1e5ce2N034ce344.png

方法1(alias.

location /static/ {
	alias E:/nginx-1.15.2/html/static/;
}

alias的路径覆盖location的路径再加上前面剩余的路径得:
E:/nginx-1.15.2/html/static/index/img/5a1e5ce2N034ce344.png

方法2(root.

location /static/ {
	root E:/nginx-1.15.2/html;
}

root的路径拼接location的路径再加上前面剩余的路径得:

E:/nginx-1.15.2/html/static/index/img/5a1e5ce2N034ce344.png

最终方法1和方法2得到的路径都与我们的目标路径一致,此时nginx部署静态资源成功

404多半还是因为路径不匹配,仔细检查

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Docker容器中部署访问静态资源Nginx,您可以按照以下步骤进行操作: 1. 在您的项目目录中创建一个名为 `Dockerfile` 的文件,并添加以下内容: ```Dockerfile # 使用基础的Nginx映像 FROM nginx # 将静态资源复制到Nginx默认的静态资源文件夹中 COPY your_static_files_folder /usr/share/nginx/html # 替换Nginx默认的配置文件 COPY nginx.conf /etc/nginx/nginx.conf # 暴露Nginx的默认端口 EXPOSE 80 ``` 2. 在您的项目目录中创建一个名为 `nginx.conf` 的文件,并根据您的需求进行配置。以下是一个简单的示例配置文件: ```nginx # 全局配置 worker_processes auto; error_log /var/log/nginx/error.log; # http块配置 http { server { listen 80; location / { root /usr/share/nginx/html; index index.html index.htm; } } } ``` 3. 将您的静态资源文件夹复制到与 `Dockerfile` 同级的位置。 4. 在终端中导航到您的项目目录,并使用以下命令构建Docker镜像: ```bash docker build -t my_nginx . ``` 这将使用 `Dockerfile` 中的指令构建一个名为 `my_nginx` 的镜像。 5. 构建完成后,可以使用以下命令运行容器并将Nginx的80端口映射到主机的某个端口(例如8888): ```bash docker run -d -p 8888:80 my_nginx ``` 现在,您可以通过访问 `http://localhost:8888` 来访问您的静态资源。 请确保将 `your_static_files_folder` 替换为您实际的静态资源文件夹路径,并根据需要自定义Nginx的配置文件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值