如何配置 nginx 来运行 angular4 应用程序 [英] How to config nginx to run angular4 application
问题描述
我是 angular 的新手，我想将应用程序放在 docker 容器上的 Nginx 服务器上.
I am new to angular and I would like to put the application on Nginx server on a docker container.
为此，我执行了以下步骤:
To do that, I did the following steps:
sudo npm install -g @angular/cli
ng new angular4-on-nginx-with-docker
1.2.通过 npm start
为应用提供服务Angular 应用程序通过
1.2. Serving the application through npm start
The angular application is working correctly through
npm start
现在，我想避免使用 npm start 命令，因为我正在考虑开发一个 dockerized 应用程序.要做到这一点，以下是:
Now, I want to avoid the command npm start because I am thinking about developing a dockerized application. To do that, below is:
FROM debian:jessie
MAINTAINER NGINX Docker Maintainers "docker-maint@nginx.com"
ENV NGINX_VERSION 1.11.9-1~jessie
RUN apt-key adv --keyserver hkp://pgp.mit.edu:80 --recv-keys 573BFD6B3D8FBC641079A6ABABF5BD827BD9BF62
&& echo "deb http://nginx.org/packages/mainline/debian/ jessie nginx" >> /etc/apt/sources.list
&& apt-get update
&& apt-get install --no-install-recommends --no-install-suggests -y
ca-certificates
nginx=${NGINX_VERSION}
&& rm -rf /var/lib/apt/lists/*
# forward request and error logs to docker log collector
RUN ln -sf /dev/stdout /var/log/nginx/access.log
&& ln -sf /dev/stderr /var/log/nginx/error.log
EXPOSE 80 443
CMD ["nginx", "-g", "daemon off;"]
2.2.nginx的配置如下:
server {
server_name angular4.dev;
root /var/www/frontend/src;
try_files $uri $uri/ index.html;
error_log /var/log/nginx/angular4_error.log;
access_log /var/log/nginx/angular4_access.log;
}
2.3.docker-compose.yml
version: '2'
services:
nginx:
build: nginx
ports:
- 88:80
volumes:
- ./nginx/frontend:/var/www/frontend
- ./nginx/default.conf:/etc/nginx/conf.d/default.conf
- ./nginx/logs/nginx/:/var/log/nginx
2.4.构建docker镜像并运行容器
docker-compose up -d --build
2.5.识别容器的IP地址
docker inspect angular4onnginxwithdocker_nginx_1 | grep IPA
#"SecondaryIPAddresses": null,
#"IPAddress": "",
# "IPAMConfig": null,
# "IPAddress": "172.18.0.2",
我认为 npm 包不可访问...我不确定到底出了什么问题.但是，我可以说的是页面是空的，并且控制台中没有任何错误消息.
I think that npm packages are not accessible... I am not sure what is wrong exactly. But, what I can say is that the page is empty and without having any error message in the console.
下面是使用nginx
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular4 on nginx with docker</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
这是使用npm start
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular4 on nginx with docker</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>
所以，怎么了???
该示例的存储库可在 github
A repo for that example is available on github
推荐答案
如果有人还在为 angular 2/4/5 应用程序 + Nginx(即没有 Docker)的生产设置而苦苦挣扎，那么这里是完整的解决方案:
If anyone still struggling with production setup of angular 2/4/5 app + Nginx(i.e. Without Docker), then here is the complete solution:
假设您想在 HOST:http://example.com 和 PORT:8080 部署 Angular 应用程序注意 - 在您的情况下，HOST 和 PORT 可能会有所不同.
Suppose you want to deploy your angular app at HOST: http://example.com and PORT: 8080
Note - HOST and PORT might be different in your case.
确保您的 index.html head 标签中有
Make sure you have <base href="/"> in you index.html head tag.
首先，转到您机器上的 angular 存储库(即/home/user/helloWorld)路径.
Firstly, go to your angular repo (i.e. /home/user/helloWorld) path at your machine.
然后使用以下命令为您的生产服务器构建/dist:
Then build /dist for your production server using the following command:
ng build --prod --base-href http://example.com:8080
ng build --prod --base-href http://example.com:8080
现在将/dist(即/home/user/helloWorld/dist)文件夹从您机器的 angular 存储库复制到您要托管生产服务器的远程机器.
Now copy /dist (i.e. /home/user/helloWorld/dist) folder from your machine's angular repo to the remote machine where you want to host your production server.
现在登录到您的远程服务器并添加以下 nginx 服务器配置.
Now login to your remote server and add following nginx server configuration.
server {
listen 8080;
server_name http://example.com;
root /path/to/your/dist/location;
# eg. root /home/admin/helloWorld/dist
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html;
# This will allow you to refresh page in your angular app. Which will not give error 404.
}
}
现在重启nginx.
Now restart nginx.
就是这样！！现在您可以通过 http://example.com:8080
That's it !! Now you can access your angular app at http://example.com:8080
希望对您有所帮助.
这篇关于如何配置 nginx 来运行 angular4 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
