在 nginx 中部署 angular 应用
来源:互联网 发布:外国人对淘宝的评价 编辑:程序博客网 时间:2024/06/06 08:30
最近使用Angular
做了第一个应用,但是网上的教程大多是教如何开发,部署相对较少,所以这里就简单记录一下如何在nginx
中部署Angular
应用。
注:
Angular
应用可以编译成静态页面,然后部署在任何 web 服务器上,这里仅仅是选择nginx
而已,同时编译后的文件其实就仅仅是静态文件而已,与其它 html 文件本质上无异。
一、编译
前提: 请确保
@angular/cli
已经安装
在项目主目录下输入以下命令:
ng build
成功则输入类似于下面的信息:
Date: 2017-10-14T08:19:18.595ZHash: aa580b91f10a49a65d87Time: 28823mschunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]chunk {main} main.bundle.js, main.bundle.js.map (main) 55.9 kB {vendor} [initial] [rendered]chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 217 kB {inline} [initial] [rendered]chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 163 kB {inline} [initial] [rendered]chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 5.74 MB [initial] [rendered]
并生成了新的目录dist
及其下的子文件/目录,此时则成功将应用编译成静态资源。
二、部署
原则上,您可以将这些资源拷贝到任何项目中,比如
JavaWeb
、NodeJs
等项目中,它们同样的可以运行。前提: 服务器已经安装
nginx
,并假设nginx
安装目录为/usr/local/nginx
nginx 的部分相关命令:
- nginx : 启动服务
- nginx -s stop : 先查出 nginx 进程 id,然后使用 kill 命令强制杀掉进程
- nginx -s quit : 等待 nginx 进程处理任务完毕,然后再进行停止
- nginx -s reload : 重启服务
- ps aux|grep nginx : 查看 nginx 进程
1) 准备源文件
拷贝项目编译后的dist
目录下的所有文件到服务器上,比如拷贝至/usr/local/web/home
2) 配置nginx
sudo vi /usr/local/nginx/conf/nginx.conf
修改http
->server
节点下 localhost
和error_page 404
的值如下:
location / { # root html; # index index.html index.htm; root /usr/local/web/home; index index.html index.html;}#error_page 404 /404.html;error_page 404 /;
这里同时修改了404
错误的跳转路径,是为了防止直接访问路由地址时出现404错误,文件全信息如下(端口被修改):
#user nobody;worker_processes 1;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/nginx.pid;events { worker_connections 1024;}http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; server { listen 8088; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { # root html; # index index.html index.htm; root /usr/local/web/home; index index.html index.html; } #error_page 404 /404.html; error_page 404 /; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} } # another virtual host using mix of IP-, name-, and port-based configuration # #server { # listen 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.htm; # } #} # HTTPS server # #server { # listen 443 ssl; # server_name localhost; # ssl_certificate cert.pem; # ssl_certificate_key cert.key; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 5m; # ssl_ciphers HIGH:!aNULL:!MD5; # ssl_prefer_server_ciphers on; # location / { # root html; # index index.html index.htm; # } #}}
重启nginx
sudo /usr/local/nginx/sbin/nginx -s reload
浏览器访问即可。
- 在 nginx 中部署 angular 应用
- nginx 部署angular项目
- vue在nginx中部署
- 在angular应用中使用HTML组件
- 在容器中部署静态网站----Nginx
- nginx部署web应用
- 在 Ubuntu 上使用 Nginx 部署 Flask 应用
- Nginx服务器在互联网系统架构部署中的应用
- 转:在 Ubuntu 上使用 Nginx 部署 Flask 应用
- Nginx+uwsgi+supervisor在Ubuntu上部署flask应用
- 在NativeScript-angular应用中使用本地设备剪切板
- 使用angular-cli-ghpages部署Angular应用到GitHub
- 在Tomcat中部署web应用
- 在Intellij idea8中部署Tomcat应用
- 在Tomcat中部署web应用
- 在IIS中部署WEB应用
- 在Docker容器中部署Web应用
- 在 Docker 中完整部署 Web 应用
- 《现代操作系统》第一章 引论
- [POJ 1144] Network Tarjan算法求割点
- Android修改状态栏颜色详解
- 332. Reconstruct Itinerary
- JavaWeb-News-文件上传
- 在 nginx 中部署 angular 应用
- 机器学习实战—笔记-kNN算法
- oracle 12c GI安装配置共享存储分区
- 二叉树遍历
- Mybatis的分页插件
- Python csv文件读取(表格文件)
- Android 6.0 权限简单介绍
- Freeswitch监听功能--单向监听
- 枚举运用