Nginx配置两个Angular2的快速入门工作吗?

时间:2016-09-19 03:00:49

标签: node.js nginx angular

1。获取 Angular2的快速入门

https://github.com/angular/quickstart.git
Git clone 下载 Angular2's quickstart两份副本:
quickstart1
quickstart2

2。开始 Angular2的快速入门

start quickstart1: xxx:xxx xxx$ cd quickstart1 xxx:xxx xxx$ npm install xxx:xxx xxx$ npm start

start quickstart2: xxx:xxx xxx$ cd quickstart2 xxx:xxx xxx$ npm install xxx:xxx xxx$ npm start

我们可以访问两个快速入门:
quickstart1:http://localhost:3000/http://127.0.0.1:3000/
quickstart2:http://localhost:3002/http://127.0.0.1:3002/

3。将图像添加到快速入门中以获取根请求(这是可选的)

(1)拿起图像文件(与quickstart2不同),将名称更改为:
test.png
放入: quickstart1

qucikstart1/index.html:
<body> <my-app>Loading...</my-app> <img src="/test.png" style="width: 240px; height: 240px" /> </body>

(2)拿起图像文件(与quickstart1不同),将名称更改为:
test.png
放入: quickstart2

qucikstart2/index.html:
<body> <my-app>Loading...</my-app> <img src="/test.png" style="width: 240px; height: 240px" /> </body>

4。想

配置Nginx,通过一个端口访问两个快速入门,按两个位置路径进行路由:
http://xxx_ip_or_servername_xxx:8888/q1/ - &gt; http://localhost:3000/
http://xxx_ip_or_servername_xxx:8888/q2/ - &gt; http://localhost:3002/

“Chrome开发者工具 - >网络”应该可以 如果你做第3步,q1 q2会显示不同的img。

5。通知

选中“Chrome开发者工具 - &gt;网络”

访问“http://xxx_ip_or_servername_xxx:8888/q1/
root请求,例如“/ browser-sync”“/ favicon.ico”“ /test.png
应该来自“http://localhost:3001/

访问“http://xxx_ip_or_servername_xxx:8888/q2/
root请求,例如“/ browser-sync”“/ favicon.ico”“ /test.png
应该来自“http://localhost:3002/

0 个答案:

没有答案