如何配置Nginx以运行angular4应用程序 [英] How to config nginx to run angular4 application
问题描述
我是Angle的新手，我想将应用程序放置在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
推荐答案
错误的一件事是您试图发布源文件，而不是使用cli进行生产构建并发布这些文件的输出. ng start用于本地开发.当您对结果感到满意时，可以使用ng build --prod来构建应用程序，并且/dist文件夹中的所有内容都应放置在docker中.
One thing that's wrong is that you are trying to publish your source files, instead of doing a production build using the cli and publish the output of these files. ng start is used for local development. When you are happy with your outcome, you can use ng build --prod to build your application, and whatever resides in your /dist folder should be placed in the docker.
如果您想在docker中拥有所有内容，则在创建新项目后应ng build --prod，然后将nginx的根指向/var/www/frontend/dist;.但是，这将大大增加docker的启动时间.显然取决于项目的大小
If you want to have everything in your docker, you should ng build --prod after creating your new project, and then point the root of your nginx to /var/www/frontend/dist;. This will highly increase the boot time of your docker though. Obviously depending on the size of your project
这篇关于如何配置Nginx以运行angular4应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
