hai-27/vue-store

你好！这个项目的部署到nginx发现了动静分离的问题，想请教一下，谢谢！

Closed this issue · 8 comments

mebest100 commented

是这样的，这个项目我在本地通过nodejs运行是没问题的（前端是你这个项目，后端上另一个老哥改造的springboot）.

但是一部署到服务器的nginx（虚拟机）就是出问题了，图片全部报404：
于是我突然想到了，这个肯定存在动静分离的问题，静态资源和接口访问应该分开的。

但是我看到你的那个vue.config.js是这样写的。
pathRewrite: {
'^/api': '',
}

相当于把api实际置空了，但是如果这样做是有问题的，因为对应nginx来说，它必须要清楚的知道：哪些是静态资源，哪些需要去调api接口。 所以/api的路径实际上是需要的，而且非常奇怪的是我发现你把那些手机图片，全部都请求到后端的public 目录，而不是在vue本地目录请求，这实在让我有点糊涂了。

说了那么多，主要是因为我对vue不太熟，想请问一下你在生产环境nginx怎么配的，上面的这些问题是怎么解决的，谢谢！

bingnoi commented

您好，您解决了吗

mebest100 commented

您好，您解决了吗

解决了，nginx配置参考我下面的：

image

bingnoi commented

我现在的问题是
我自己重写了后端，利用的flask，图片全都在静态路径public下,但是vue在手机上无法加载出图片，请问有可能是什么原因呢

mebest100 commented

我现在的问题是
我自己重写了后端，利用的flask，图片全都在静态路径public下,但是vue在手机上无法加载出图片，请问有可能是什么原因呢

你的这个问题让我突然发现了这个项目的很多bug,你对照我下面的解决方案进行排查：

  1. 静态图片路径的问题： 这个项目的所有图片都是通过向后端接口请求获取url地址，然后回显出来，所以你需要到下面的地址把
    所有的图片拷贝你后端public路径下，flask应该是把static_folder设置成./pubic就应该可以了，我是springboot跟你不一样，具体你自己搜索
    https://github.com/hai-27/store-server/tree/master/public/imgs

  2. 前端vue部分的代码需要修改： 他这个项目的图片路径有个致命的错误：就是通过localhost:后端端口+xxxx来构造图片的绝对路径，这个是绝对错误的！！！ 因为图片src展示给用户的时候，会在浏览器的localhost本地去找图片，那还找个屁啊！，这个本来通过/api的nginx反向代理到后端去查找就OK了,完全没必要写成绝对路径，你按照我下面的去修改源代码就可以了：
    image

  3. 轮播图的sql数据库的数据也要手动修改（他数据库中的图片路径也写成localhost开头，我他妈也是醉了）：
    image

把这三点改完就OK了。我在手机上测试过了显示没问题，但是他这个对移动端没有做适配，显示效果不理想。

image

bingnoi commented

谢谢你的解答！！！

hai-27 commented

@mebest100
关于你所说的第二点，首先图片路径是通过$target+xxx来拼接成绝对路径。$target我写了两个，一个是本地的（http://localhost:3000/），另外一个是线上的（http://47.115.85.237:3000/），就在你修改$target = /api这里，有备注，自己根据运行的环境手动切换一下就可以，你不会没有看到吧？

并非你说的"就是通过localhost:后端端口+xxxx来构造图片的绝对路径"哈。

至于为什么不用/api的nginx反向代理到后端，图片不存在跨域的问题，不需要通过反向代理访问。我的服务器性能一般，没有必要加大nginx服务器的压力吧。
image

关于你所说的第三点，你在哪里看到了轮播图的sql数据库的数据是以localhost开头？
sql源文件在这里https://github.com/hai-27/store-server/blob/master/storeDB.sql，只不过是注释了而已，麻烦你看清楚一点，谢谢。
image

mebest100 commented

@hai-27
你自己去看：你的图片地址是不是拼接成绝对路径的：
image

把图片路径拼接成绝对路径，本身就是一种愚蠢的行为：

  1. 就算是图片没跨域，但是服务器ip总在变，难不成每次部署都需要手动修改ip？
  2. proxy代理只存在于vue dev环境，生产环境难道会用npm run的方式去运行？你在搞笑吗？生产环境必定都是打包成spa文件再部署到nginx。
  3. 从没听说nginx反向代理会耗费系统资源，nginx是轻量级http应用，我是linux运维出身，这一点不用跟我争。
  4. sql文件可能跟你无关，我是从另外一个人手里拷过来的
  5. 最后：有人问你问题不回复， 说你代码写的烂，就跳出来了，你也就这水平了
hai-27 commented

@mebest100
首先，图片路径的确是拼接成绝对路径，我在上一条回复已经说了，也说了是提供了两个路径，一个是本地的路径，一个是线上的路径，需要自己修改代码手动切换一下。
image

至于你说的，“ 把图片路径拼接成绝对路径，本身就是一种愚蠢的行为 ”，我想请问，在实际的项目中，图片难道不会放在cdn吗，cdn链接不就是一个绝对得路径吗？我只不过是利用了服务端模拟了cdn服务而已，拼接绝对路径直接访问有问题吗，为什么一定要经过nginx反向代理呢？

还有，服务器ip总在变的问题，或者是有多个ip，难道不可以是域名吗？访问域名，通过dns解析ip吗。

项目部署到线上，的确是先经过code build 的，部署的是打包出来的文件。nginx中关于api的代理配置是：

location ^~/api/ {
		proxy_pass http://47.115.85.237:3000/;
}

至于 “nginx是轻量级http应用 ， nginx反向代理不会耗费系统资源 ”，项目中存在大量的图片，如果访问图片都要经过nginx，会消耗大量的服务器带宽，我个人认为是没有必要的，完成可以直接访问。

最后，关于“ 有人问你问题不回复， 说代码写的烂，就跳出来了 ”，我想说的是，有的时候我是没有留意到；而有的时候，我是觉得没有必要回答这个问题，你有你的方案，你用你的方案就行。上次我回复是不想给其他人造成误导。