经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 数据库/运维 » Nginx » 查看文章
nginx配置多个前端项目实现步骤
来源:jb51  时间:2023/3/8 10:59:06  对本文有异议

最近一台服务器要配置多个前端项目,当然前后端分离就需要nginx来配置了。

单个项目还好说,如下
修改nginx的nginx.conf配置文件

  1. #user nobody;
  2. worker_processes 1;
  3.  
  4. #error_log logs/error.log;
  5. #error_log logs/error.log notice;
  6. #error_log logs/error.log info;
  7.  
  8. pid /usr/local/nginx/logs/nginx.pid;
  9.  
  10.  
  11. events {
  12. worker_connections 1024;
  13. }
  14.  
  15.  
  16. http {
  17. server {
  18. listen 8000;
  19. server_name localhost;
  20.  
  21. #charset koi8-r;
  22.  
  23. #access_log logs/host.access.log main;
  24. location / {
  25. root /var/www/;
  26. #index index.html index.htm;
  27. }
  28. location ~ /static/.*\.(gif|jpg|jpeg|png|bmp|swf)$ {
  29. root /var/www/project;
  30. }
  31.  
  32. location ~ /static/.*\.(js|css)$ {
  33. root /var/www/project;
  34. }
  35.  
  36. location = /project {
  37. root /var/www/project;
  38. index index.html index.htm;
  39. }
  40. }
  41.  
  42. }

但是出现了多个项目也需要在nginx.conf配置

项目基于vue cli 开发的,打包时需要配置一下js,css 等静态文件的连接地址
修改如下配置文件

这里写图片描述

根据项目名字或者路径名 修改 在对应的项目里

  1. assetsPublicPath: '/project/'
  2. -----------------------
  3. assetsPublicPath: '/project1/'

然后再来配置nginx.conf

  1. user root;
  2. worker_processes 1;
  3.  
  4. pid /usr/local/nginx/logs/nginx.pid;
  5.  
  6. events {
  7. worker_connections 1024;
  8. }
  9.  
  10.  
  11. http {
  12. include mime.types;
  13. default_type application/octet-stream;
  14.  
  15. #log_format main '$remote_addr - $remote_user [$time_local] "$request" '
  16. # '$status $body_bytes_sent "$http_referer" '
  17. # '"$http_user_agent" "$http_x_forwarded_for"';
  18.  
  19. #access_log logs/access.log main;
  20.  
  21. sendfile on;
  22. #tcp_nopush on;
  23.  
  24. #keepalive_timeout 0;
  25. keepalive_timeout 65;
  26.  
  27. #gzip on;
  28.  
  29. server {
  30. listen 8000;
  31. server_name localhost;
  32.  
  33. #charset koi8-r;
  34.  
  35. #access_log logs/host.access.log main;
  36. location / {
  37. root /var/www;
  38. #index index.html index.htm;
  39. }
  40.  
  41. location = /project1 {
  42. root /var/www/project1;
  43. try_files $uri $uri/ /project1/index.html;
  44. index index.html index.htm;
  45. }
  46. location = /project2{
  47. root /var/www/project2;
  48. try_files $uri $uri/ /project2/index.html;
  49. index index.html index.htm;
  50. }
  51.  
  52. }
  53.  
  54. }

此处注意呢 user root; 需要加上, 不然范围报 500,
然后重启一下nginx

  1. 先停止
  2. ./nginx -s quit
  3. 再重启
  4. /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

当然nginx -s reload 可以 ,但是可能报错, 解决就用上面办法

这里写图片描述

成功访问
192.168..:8000/project/index.html
192.168..:8000/project1/index.html

到此这篇关于nginx配置多个前端项目实现步骤的文章就介绍到这了,更多相关nginx配置多前端项目内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号