Angular20 nginx安装,angular项目部署
1 nginx安装(Windows版本)
1.1 下载安装包
到官网下载Windows版本的nginx安装包
技巧01:下载好的压缩包解压即可,无需安装
1.2 启动nginx
进入到解压目录,点击 nginx.exe 就可以启动nginx啦
1.3 验证
打开浏览器,跳转到 http://127.0.0.1/ 后如果出现下面的页面就说明nginx安装成功啦
1.4 参考文档
2 angular项目部署
2.1 项目打包
对angular项目进行打包处理,打包好后在angular项目的根目录会出现一个dist文件夹,该文件夹存放的就是打包好的项目文件
技巧01:需要到 package.json 中去修改 ng build 指令
{
"name": "qcbx",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod --base-href /qcbx/",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^5.2.5",
"@angular/cdk": "^5.2.2",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/material": "^5.2.2",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular/cli": "~1.7.0",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}
2.2 打包项目移动
将打包好的项目移动到任意位置,例如:
2.3 nginx配置
nginx需要配置的东西也就是在conf文件中,打开安装目录下的 conf/nginx.conf 在http节点下添加server节点
技巧01:天假server节点时一定要加上 try_files $uri $uri/ /index.html; 否则项目配置的子路由无法生效
#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 80;
server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / {
root html;
index index.html index.htm;
} #error_page 404 /404.html; # 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;
#}
} server {
listen 8888;
server_name localhost;
location / {
root "G:/dev/angular/dist";
index index.html;
try_files $uri $uri/ /index.html;
} error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
} # 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;
# }
#} }
2.4 重启nginx
技巧01:利用命令启动或者关闭nginx时必须进入到安装nginx的根目录,例如
Windows下nginx命令操作:点击前往
nginx.exe
nginx.exe -s stop
nginx.exe -s quit
nginx.exe -s reload
坑01:重启nginx后还必须清楚浏览器数据,再访问时才可以看到最新的效果,否则会是重启nginx之前的效果
2.5 效果展示
利用浏览器访问 http://127.0.0.1:8888/ 就会弹出angular项目的页面
2.6 参考文档
Angular20 nginx安装,angular项目部署的更多相关文章
- Angular4---部署---将Angular项目部署到IIS上
---恢复内容开始--- Angular项目部署到一个IIS服务器上 1.安装URL rewrite组件: 网址:https://www.microsoft.com/en-us/download/de ...
- [转]Angular4---部署---将Angular项目部署到IIS上
本文转自:https://www.cnblogs.com/kingkangstudy/p/7699710.html Angular项目部署到一个IIS服务器上 1.安装URL rewrite组件: 网 ...
- .NET Core +Angular 项目 部署到CentOS
前言: 最近公司需要开发项目能在Linux系统上运行,示例开发项目采用.Net Core + Angular开发:理论上完全支持跨平台. 但是实践才是检验真理的唯一标准:那么还是动手来验证实现下:过程 ...
- 基于腾讯云CentOS7.4+MySQL5.7+Python3+uwsgi+nginx的Django项目部署
准备知识 1.django一个基于python的开源web框架,请确保自己熟悉它的框架目录结构. 2.uWSGI一个基于自有的uwsgi协议.wsgi协议和http服务协议的web网关 3.nginx ...
- Linux下tomcat的安装与项目部署
最近在linux下安装了jdk,为了圆我以前的心愿,把tomcat也安装了,顺便部署个项目,也算是小又成就感 废话不说了,直接上过程 一.下载安装对应的jdk,并配置Java环境. 有关jdk的安装请 ...
- centos 5.8 x64Jetty的安装以及项目部署配置
链接地址:http://blog.csdn.net/shuixin536/article/details/9049821 安装环境 centos 5.8 x64 安装前须知 首先在安装Jetty之前要 ...
- 微服务架构 ------ DockerCompose从安装到项目部署
DockerCompose的目的:简化Docker的启动和停止流程,以及编排Docker启动服务与服务之间的关系 DockerCompose的安装:curl -L https://get.daoclo ...
- Nginx+Uwsgi+Django 项目部署到服务器。
首先先说一下思路: 1.本地django项目打包 主要用到的是 python自带的distutils.core 下的 setup,具体代码在下面,主要讲的两个问题是package主要打包为和目录同级的 ...
- tomcat安装与项目部署
1.tomcat依赖:jdk jre,环境变量配置 java_home jre_home 2.tomcat安装: 下载:http://tomcat.apache.org/ download ...
随机推荐
- Version 1.7.0_80 of the JVM is not suitable for this product.Version: 1.8 or greater is required.
Eclipse启动失败,设置eclipse启动jdk有2种方法 第一种: 直接安装eclipse对应的jdk版本,并设置环境变量 第二种: 修改eclipse配置文件eclipse.ini 在plug ...
- 微信公众号中ip白名单用谁的ip
https://segmentfault.com/q/1010000010201211 白名单怎么说 我该填写谁的 我的ip地址每天都变化的 服务器ip啊,为了防止未授权的代码盗用你的权限.写你ip是 ...
- 【开发技术】Eclipse设置软tab(用4个空格字符代替)及默认utf-8文件编码(unix)
Eclipse设置软tab(用4个空格字符代替)及默认utf-8文件编码(unix) 本文摘要: 1.如何配置Eclipse中编辑器支持softtab(用数个空格字符代替默认的tab缩进): 2.如何 ...
- apache:侧重于http server tomcat:侧重于servlet引擎
apache:侧重于http server tomcat:侧重于servlet引擎
- linux下用iptables做本机端口转发方法(转载)
一 :从一台机到另一台机端口转发 启用网卡转发功能 #echo 1 > /proc/sys/net/ipv4/ip_forward 举例:从192.168.0.132:21521(新端口)访问1 ...
- Java数据持久层框架 MyBatis之API学习二(入门)
对于MyBatis的学习而言,最好去MyBatis的官方文档:http://www.mybatis.org/mybatis-3/zh/index.html 对于语言的学习而言,马上上手去编程,多多练习 ...
- [one day one question] Vue单页面应用如何保证F5强刷不清空数据
问题描述: Vue单页面用按F5强刷,数据就恢复初始了,这怎么破? 解决方案: store.subscribe((mutation, state) => { sessionStorage.set ...
- 改变UITableView选中行高亮的颜色
UIView *backView = [[UIView alloc] initWithFrame:self.contentView.frame]; backView.backgroundColor = ...
- 自己写的日志框架--linkinLog4j--框架可配置+提性能
OK,上一篇博客我们已经实现了日志框架的基本的功能,但是还有一个最大的问题就是日志输出地不能重定向,然后一些输出也不可控.那现在我们来实现一个比较完整的日志框架. 设计思路如下: 1,定义一堆常量Li ...
- linux中操作java进程
通过 ps -ef|grep java 来得到真正运行的线程 通过kill -9 XXXXX来杀死正在运行的线程,其中XXXXX是上面java线程的序号. 另外还有2个指令我也不熟悉,一个是cat,一 ...