nginx部署发布angular6应用

╰+攻爆jí腚メ 2021-09-28 04:46 314阅读 0赞

# nginx中部署发布angular应用 #

注：Angular应用可以ng buid 编译成静态页面，然后部署在任何 web 服务器上，这里仅仅是选择nginx而已，同时编译后的文件其实就仅仅是静态文件而已，与其它 html 文件本质上无异。

# 一、编译 #

前提： 请确保@angular/cli已经安装  
假设angular项目名称为new-app  
在项目主目录下输入以下命令：

ng build

项目目录下生成了新的目录dist及其下的new-app子文件/目录，此时则成功将应用编译成静态资源。

# 二、部署 #

原则上，您可以将这些资源拷贝到任何项目中，比如apache 、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目录下的所有文件到服务器上，比如拷贝至/data/web/

## 2) 配置nginx ##

sudo vi /usr/local/nginx/conf/nginx.conf

这里设置80端口为web页面服务，该端口需要root权限启动nginx.

server配置如下：

server {
            listen       80;
            server_name  localhost;
            location / {
                root /data/app/sys/ptt-front-ng/ptt-front;
                index  index.html index.htm;
                try_files $uri $uri/ /index.html;
            }
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }

必须设置 使用 try\_files 指向 index.html  
需要server location 配置 try\_files $uri $uri/ /index.html;  
否则angular的路由跳转无效，会出现404错误

## try\_files用法介绍 ##

参考https://www.nginx.com/resources/wiki/start/topics/tutorials/config\_pitfalls/\#front-controller-pattern-web-apps  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 1]

## 启动nginx ##

sudo /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

然后浏览器访问即可。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70]: /images/20210923/afea4c2a4f7d49c2854c6a5b7be1bcee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 1]: /images/20210923/d045f01e874b49a5bec23d9ee195556e.png