使用NginX服务angular度应用

我有以下结构的angular度应用程序。 我通常使用快速服务器来提供angular色应用程序,但是我需要在数字海洋实例上使用nginx来部署这个应用程序。 我是nginx的新手,不太明白这是如何工作的。 我有一个像这样的初始结构:

Nginxconfiguration

server { listen 80; root /var/www/webclient.com/dist; index index.html; server_name domain.com www.domain.com; location / { proxy_pass http://134.435.11.92:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } } server { listen 80; server_name api.domain.com; location / { proxy_pass http://134.435.11.92:8080; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } } 

目录结构 (dist文件夹)

 ├── 404.html ├── cloudwave.css ├── cloudwave.js ├── favicon.ico ├── fonts │  ├── FontAwesome.otf │  ├── fontawesome-webfont.eot │  ├── fontawesome-webfont.svg │  ├── fontawesome-webfont.ttf │  ├── fontawesome-webfont.woff │  └── ufonts.com_tw-cen-mt.ttf ├── images │  ├── blog │  │  ├── blog-bg.jpg │  │  ├── blog-img-1.jpg │  │  ├── blog-img-2.jpg │  │  ├── blog-img-3.jpg │  │  ├── blog-img-4.jpg │  │  ├── blog-img-5.jpg │  │  ├── blog-img-6.jpg │  │  ├── blog-img-thumb-1.jpg │  │  └── blog-img-thumb-2.jpg │  ├── cooker-img.png │  ├── fashion_room.jpg │  ├── header.jpg │  ├── logo-orig.png │  ├── logo.png │  ├── overlay-pattern.png │  ├── overlay-pattern2.png │  ├── photo │  │  ├── photo-1.jpg │  │  ├── photo-2.jpg │  │  ├── photo-3.jpg │  │  └── photo-4.jpg │  ├── slider │  │  ├── slider-img-1.jpg │  │  ├── slider-img-2.jpg │  │  ├── slider-img-3.jpg │  │  └── slider-img-4.jpg │  ├── subscribe-bg.jpg │  └── top_bg.jpg ├── index.html ├── robots.txt ├── scripts.js └── templates.js 

第二个服务器块运行一个节点服务器,我得到了这个工作。 但是第一台服务器是问题所在。 我如何configurationnginx来提供目录结构中的内容? 谢谢 :)

您需要删除第一个server块中的整个location块。 这是代理,而不是你想要的。 然后,您要将根设置为要提供的文件的根目录的路径。

看起来这已经是你想要的了。 所以去www.domain.com/images/logo.png应该提供文件/var/www/webclient.com/dist/images/logo.png