我是角色的新手,我想将应用程序放在Nginxdocker容器上的服务器上.
为此,我执行了以下步骤:
sudo npm install -g @angular/cli
ng new angular4-on-nginx-with-docker
npm start角度应用程序正常工作
npm start
现在,我想避免使用该命令,npm start因为我正在考虑开发一个dockerized应用程序.为此,下面是:
Dockerfilenginx的文件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;"]
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;
}
docker-compose.ymlversion: '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
docker-compose up -d --build
docker inspect angular4onnginxwithdocker_nginx_1 | grep IPA
#"SecondaryIPAddresses": null,
#"IPAddress": "",
# "IPAMConfig": null,
# "IPAddress": "172.18.0.2",
在172.18.0.2上打开浏览器
我认为npm包不可访问...我不确定究竟是什么问题.但是,我可以说的是页面是空的,并且在控制台中没有任何错误消息.
以下是使用时获得的代码 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上提供了该示例的repo
vik*_*iks 21
如果有人仍在努力与角度2/4/5 app + Nginx(即没有Docker)的生产设置,那么这里是完整的解决方案:
假设您要在HOST上部署角度应用程序:http://example.com和PORT:8080
注意 - 在您的情况下,HOST和PORT可能会有所不同.
确保你有<base href="/">index.html head标签.
首先,转到您机器上的角度回购(即/ home/user/helloWorld)路径.
然后使用以下命令为生产服务器构建/ dist:
ng build --prod --base-href http://example.com:8080
现在将/ dist(即/ home/user/helloWorld/dist)文件夹从机器的angular repo复制到要托管生产服务器的远程机器上.
现在登录到您的远程服务器并添加以下nginx服务器配置.
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.
而已 !!现在,您可以访问http://example.com:8080上的角度应用
希望它会有所帮助.
有一件事是错误的是您尝试发布源文件,而不是使用cli进行生成构建并发布这些文件的输出.ng start用于本地开发.当您对结果感到满意时,可以使用ng build --prod构建应用程序,并且/dist文件夹中的任何内容都应放在docker中.
如果你想在你的搬运工的一切,你应该ng build --prod创建新的项目,再经过点你的根nginx来/var/www/frontend/dist;.这会大大增加docker的启动时间.显然取决于您的项目的大小
| 归档时间： |
|
| 查看次数： |
21539 次 |
| 最近记录： |