通过nginx服务器访问静态资源

通过nginx服务器访问静态资源

引言

之前在做毕设的时候接触过nginx，那时候是用来做前后端分离的。一转眼都快一年了，nginx的相关内容也忘的差不多了。
有过接触前端的同学都知道，直接在<img>标签的src属性上写本地路径是会报错的，谷歌浏览器是不允许这种写法的，因为不安全。解决这个问题的办法有很多，比如：
（1）建虚拟路径（可在代码中写、也可在tomcat的配置文件中修改）。
（2）通过流的形式把图片响应给前端。
（3）还有一种就是启动一个服务（文件服务器），通过访问这个服务来获取到响应静态资源。
所以今天来记录下，通过nginx服务器访问静态资源。

1、下载nginx并安装

nginx下载地址：go to download nginx

2、启动nginx

打开终端，进入到解压好的文件夹下（能看到nginx.exe的目录）
然后执行 start nginx就好了。

3、nginx.conf配置文件

这个配置文件可以说是nginx的核心了。

访问localhost:8084

配置文件中的html文件夹就是在nginx的根目录下

4、在html文件夹下放入自己想要访问的静态资源

我们来尝试着访问这个文件（1.txt）

---

浏览器输入：http://localhost:8084/image/1.txt

效果图：

%23%20%E9%80%9A%E8%BF%87nginx%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%AE%BF%E9%97%AE%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90%0A%23%23%20%E5%BC%95%E8%A8%80%0A%3E%20%E4%B9%8B%E5%89%8D%E5%9C%A8%E5%81%9A%E6%AF%95%E8%AE%BE%E7%9A%84%E6%97%B6%E5%80%99%E6%8E%A5%E8%A7%A6%E8%BF%87nginx%EF%BC%8C%E9%82%A3%E6%97%B6%E5%80%99%E6%98%AF%E7%94%A8%E6%9D%A5%E5%81%9A%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E7%9A%84%E3%80%82%E4%B8%80%E8%BD%AC%E7%9C%BC%E9%83%BD%E5%BF%AB%E4%B8%80%E5%B9%B4%E4%BA%86%EF%BC%8Cnginx%E7%9A%84%E7%9B%B8%E5%85%B3%E5%86%85%E5%AE%B9%E4%B9%9F%E5%BF%98%E7%9A%84%E5%B7%AE%E4%B8%8D%E5%A4%9A%E4%BA%86%E3%80%82%0A%3E%20%E6%9C%89%E8%BF%87%E6%8E%A5%E8%A7%A6%E5%89%8D%E7%AB%AF%E7%9A%84%E5%90%8C%E5%AD%A6%E9%83%BD%E7%9F%A5%E9%81%93%EF%BC%8C%E7%9B%B4%E6%8E%A5%E5%9C%A8%3Cimg%3E%E6%A0%87%E7%AD%BE%E7%9A%84src%E5%B1%9E%E6%80%A7%E4%B8%8A%E5%86%99%E6%9C%AC%E5%9C%B0%E8%B7%AF%E5%BE%84%E6%98%AF%E4%BC%9A%E6%8A%A5%E9%94%99%E7%9A%84%EF%BC%8C%E8%B0%B7%E6%AD%8C%E6%B5%8F%E8%A7%88%E5%99%A8%E6%98%AF%E4%B8%8D%E5%85%81%E8%AE%B8%E8%BF%99%E7%A7%8D%E5%86%99%E6%B3%95%E7%9A%84%EF%BC%8C%E5%9B%A0%E4%B8%BA%E4%B8%8D%E5%AE%89%E5%85%A8%E3%80%82%E8%A7%A3%E5%86%B3%E8%BF%99%E4%B8%AA%E9%97%AE%E9%A2%98%E7%9A%84%E5%8A%9E%E6%B3%95%E6%9C%89%E5%BE%88%E5%A4%9A%EF%BC%8C%E6%AF%94%E5%A6%82%EF%BC%9A%0A%3E%20%EF%BC%881%EF%BC%89%E5%BB%BA%E8%99%9A%E6%8B%9F%E8%B7%AF%E5%BE%84%EF%BC%88%E5%8F%AF%E5%9C%A8%E4%BB%A3%E7%A0%81%E4%B8%AD%E5%86%99%E3%80%81%5B**%E4%B9%9F%E5%8F%AF%E5%9C%A8tomcat%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E4%B8%AD%E4%BF%AE%E6%94%B9**%5D(https%3A%2F%2Fapp.yinxiang.com%2Ffx%2Fc457a937-43aa-4c7c-bfbb-4a55dbe3a3f1)%EF%BC%89%E3%80%82%0A%3E%20%EF%BC%882%EF%BC%89%E9%80%9A%E8%BF%87%E6%B5%81%E7%9A%84%E5%BD%A2%E5%BC%8F%E6%8A%8A%E5%9B%BE%E7%89%87%E5%93%8D%E5%BA%94%E7%BB%99%E5%89%8D%E7%AB%AF%E3%80%82%0A%3E%20%EF%BC%883%EF%BC%89%E8%BF%98%E6%9C%89%E4%B8%80%E7%A7%8D%E5%B0%B1%E6%98%AF%E5%90%AF%E5%8A%A8%E4%B8%80%E4%B8%AA%E6%9C%8D%E5%8A%A1%EF%BC%88%E6%96%87%E4%BB%B6%E6%9C%8D%E5%8A%A1%E5%99%A8%EF%BC%89%EF%BC%8C%E9%80%9A%E8%BF%87%E8%AE%BF%E9%97%AE%E8%BF%99%E4%B8%AA%E6%9C%8D%E5%8A%A1%E6%9D%A5%E8%8E%B7%E5%8F%96%E5%88%B0%E5%93%8D%E5%BA%94**%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90**%E3%80%82%0A%3E%20%E6%89%80%E4%BB%A5%E4%BB%8A%E5%A4%A9%E6%9D%A5%E8%AE%B0%E5%BD%95%E4%B8%8B%EF%BC%8C%E9%80%9A%E8%BF%87nginx%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%AE%BF%E9%97%AE%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90%E3%80%82%0A%0A%23%23%201%E3%80%81%E4%B8%8B%E8%BD%BDnginx%E5%B9%B6%E5%AE%89%E8%A3%85%0Anginx%E4%B8%8B%E8%BD%BD%E5%9C%B0%E5%9D%80%EF%BC%9A%5Bgo%20to%20download%20nginx%5D(http%3A%2F%2Fnginx.org%2Fen%2Fdownload.html)%0A!%5Bcfc79b3f0c170838bb2c60f1618896a8.png%5D(en-resource%3A%2F%2Fdatabase%2F2311%3A1)%0A%E6%9C%89%E4%B8%89%E7%A7%8D%E7%89%88%E6%9C%AC%EF%BC%9A%E4%B8%BB%E6%B5%81%E7%89%88%E6%9C%AC%E3%80%81%E7%A8%B3%E5%AE%9A%E7%89%88%E6%9C%AC%E3%80%81%E5%8E%86%E5%8F%B2%E7%89%88%E6%9C%AC%EF%BC%9B%E6%88%91%E4%BB%AC%E8%BF%99%E9%87%8C%E4%BD%BF%E7%94%A8%E7%9A%84%E6%98%AF%E7%A8%B3%E5%AE%9A%E7%89%88%E6%9C%AC%E3%80%82%0A%E4%B8%8B%E8%BD%BD%E4%B9%8B%E5%90%8E%EF%BC%8C%E5%9C%A8%E6%8C%87%E5%AE%9A%E7%9B%AE%E5%BD%95%E4%B8%8B%E8%A7%A3%E5%8E%8B%EF%BC%88**%E5%8F%AA%E9%9C%80%E8%A7%A3%E5%8E%8B%E5%B0%B1%E5%A5%BD%E4%BA%86**%EF%BC%89%EF%BC%8C%E6%89%93%E5%BC%80%E7%9B%AE%E5%BD%95%EF%BC%8C%E5%A6%82%E4%B8%8B%EF%BC%9A%0A!%5B39a53b37d028ba26edcd8b64d3aaf4f5.png%5D(en-resource%3A%2F%2Fdatabase%2F2313%3A1)%0A%0A%23%23%202%E3%80%81%E5%90%AF%E5%8A%A8nginx%0A%3E%E6%89%93%E5%BC%80%E7%BB%88%E7%AB%AF%EF%BC%8C%E8%BF%9B%E5%85%A5%E5%88%B0%E8%A7%A3%E5%8E%8B%E5%A5%BD%E7%9A%84%E6%96%87%E4%BB%B6%E5%A4%B9%E4%B8%8B%EF%BC%88%E8%83%BD%E7%9C%8B%E5%88%B0nginx.exe%E7%9A%84%E7%9B%AE%E5%BD%95%EF%BC%89%0A%3E%E7%84%B6%E5%90%8E%E6%89%A7%E8%A1%8C%20start%20nginx%E5%B0%B1%E5%A5%BD%E4%BA%86%E3%80%82%0A%0A!%5Bb733fbe7efa39b314a37603c5b2075d0.png%5D(en-resource%3A%2F%2Fdatabase%2F2381%3A0)%0A%0A%23%23%203%E3%80%81nginx.conf%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%0A%3E%E8%BF%99%E4%B8%AA%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E5%8F%AF%E4%BB%A5%E8%AF%B4%E6%98%AFnginx%E7%9A%84%E6%A0%B8%E5%BF%83%E4%BA%86%E3%80%82%0A%0A!%5B2973a4df06413ce49ee55968c0c1ada2.png%5D(en-resource%3A%2F%2Fdatabase%2F2383%3A0)%0A%0A**%E8%AE%BF%E9%97%AElocalhost%3A8084**%0A!%5B08b20079fa800cc761a0a3f67af4e19e.png%5D(en-resource%3A%2F%2Fdatabase%2F2385%3A0)%0A%3E%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E4%B8%AD%E7%9A%84html%E6%96%87%E4%BB%B6%E5%A4%B9%E5%B0%B1%E6%98%AF%E5%9C%A8nginx%E7%9A%84%E6%A0%B9%E7%9B%AE%E5%BD%95%E4%B8%8B%0A%0A!%5B055d5f86398c62818f5cac9c7c233553.png%5D(en-resource%3A%2F%2Fdatabase%2F2387%3A0)%0A%0A%23%23%204%E3%80%81%E5%9C%A8html%E6%96%87%E4%BB%B6%E5%A4%B9%E4%B8%8B%E6%94%BE%E5%85%A5%E8%87%AA%E5%B7%B1%E6%83%B3%E8%A6%81%E8%AE%BF%E9%97%AE%E7%9A%84%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90%0A%3E%E6%88%91%E4%BB%AC%E6%9D%A5%E5%B0%9D%E8%AF%95%E7%9D%80%E8%AE%BF%E9%97%AE%E8%BF%99%E4%B8%AA%E6%96%87%E4%BB%B6%EF%BC%881.txt%EF%BC%89%0A!%5B44c89c10bc539bd41a5d87a02f669f06.png%5D(en-resource%3A%2F%2Fdatabase%2F2389%3A0)%0A***%0A!%5Bbff7327a5c977176a2a591f1c3f76b14.png%5D(en-resource%3A%2F%2Fdatabase%2F2391%3A0)%0A%0A%E6%B5%8F%E8%A7%88%E5%99%A8%E8%BE%93%E5%85%A5%EF%BC%9Ahttp%3A%2F%2Flocalhost%3A8084%2Fimage%2F1.txt%0A%0A**%E6%95%88%E6%9E%9C%E5%9B%BE%EF%BC%9A**%0A%0A!%5B4da5ac12e16a8ca09ed2a5b4d3512de4.png%5D(en-resource%3A%2F%2Fdatabase%2F2393%3A0)%0A