Nginx Angular2/Angular路线

前端之家收集整理的这篇文章主要介绍了Nginx Angular2/Angular路线前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有一个在docker容器内运行的Angular2 / Angular应用程序,并使用Nginx来提供它.所以我的app base = / myapp /.使用基本网址(即www.server.com/myapp或www.server.com/myapp/)访问应用时,一切正常

  1. events {
  2. worker_connections 4096; ## Default: 1024
  3. }
  4. http {
  5. include /etc/Nginx/conf/*.conf;
  6. server {
  7. listen 80 default_server;
  8. root /usr/share/Nginx/html;
  9. index index.html index.htm;
  10. include /etc/Nginx/mime.types;
  11. underscores_in_headers on;
  12. location /myapp {
  13. # If you want to enable html5Mode(true) in your angularjs app for pretty URL
  14. # then all request for your angularJS app will be through index.html
  15. try_files $uri /myapp/index.html;
  16. }
  17. #Static File Caching. All static files with the following extension will be cached for 1 day
  18. location ~* .(jpg|jpeg|png|gif|ico|css|js)${
  19. expires 1d;
  20. }
  21. ## PROXIES ##
  22. # location matcher for get requests. Any query params will be proxied using this location block
  23. location = /myapp/api {
  24. proxy_pass http://$hostname/api$is_args$query_string;
  25. proxy_http_version 1.1;
  26. proxy_set_header Upgrade $http_upgrade;
  27. proxy_set_header Connection 'upgrade';
  28. proxy_set_header Host $host;
  29. proxy_cache_bypass $http_upgrade;
  30. proxy_set_header X-Real-IP $remote_addr;
  31. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  32. proxy_connect_timeout 120;
  33. proxy_send_timeout 120;
  34. proxy_read_timeout 120;
  35. send_timeout 120;
  36. }
  37. # location matcher for post requests i.e. updateAsset. Any request with additional path params will be proxied using this location block
  38. location ~ ^/myapp/api/(?

我的应用还有其他一些路线,例/ myapp / page1或/ myapp / page2.使用nodejs以开发模式提供应用程序时,可以点击这些路径.然而,一旦我将其容器化(容器化不是问题)并使用Nginx服务,那么在尝试访问/ myapp / page1或/ myapp / page2时,我找不到404.错误日志输出

2017/02/27 12:15:01 [错误] 5#5:* 3打开()“/usr/share / Nginx / html / myapp / page1”失败(2:没有这样的文件或目录),客户端:172.17 .0.1,server :,request:“GET / myapp / page1 HTTP / 1.1”,主机:“localhost”

我已经尝试在Nginx conf文件中映射我的所有应用程序URL但似乎没有任何效果.我如何让它工作?

更新1

增加了角度路线

主应用程序路线:

  1. import { Route } from '@angular/router';
  2. import { MyAppComponent } from './index';
  3. export const MyAppRoutes: Route[] = [
  4. {
  5. path: '',component: MyAppComponent
  6. }
  7. ];

第1页路线:

  1. import { Route } from '@angular/router';
  2. import { Page1Component } from './index';
  3. export const Page1Routes: Route[] = [
  4. {
  5. path:'page1',component: Page1Component
  6. }
  7. ];
这是我的Nginx sites-available / myapp

  1. server {
  2. listen 80;
  3. listen 80 [::]:80;
  4. root /my/root/path;
  5. server_name www.mysite.com mysite.com;
  6. location /app1/ {
  7. alias /my/root/path/app1/;
  8. try_files $uri$args $uri$args/ $uri/ /app1/index.html;
  9. }
  10. location /app2/ {
  11. ...
  12. }
  13. }

设置好配置后,您要启用站点,运行:

  1. sudo ln -s /pathtoNginx/sites-available/myapp /pathtoNginx/sites-enabled/myapp

我的index.html上的basehref

希望这可以帮助!

猜你在找的Nginx相关文章