Angular 项目编译后部署在CentOS7.3 Nginx 中

  • 先介绍我的开发环境:
    我的开发用电脑是WIN10 64BIT,虚拟机中安装了CentOS7.3,Linux服务器中安装了Nginx1.16.1,之后会部署Angular项目的编译后文件在Nginx中

  • 我的Angular项目 index.html中的路径是:,编译项目的命令是:ng build --prod --aot --base-href ./

  • 下面介绍CentOS 7.3环境,Nginx安装路径是:/etc/nginx,在默认的配置文件 /etc/nginx/conf.d/default.conf 中的全部代码如下:
    server {
    listen 80;
    server_name localhost;

    #charset koi8-r;
    #access_log /var/log/nginx/host.access.log main;

    location / {
    root /chanchaw/app/angular;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
    }

    location /mystatus{
    stub_status;
    }

    #error_page 404 /404.html;

    redirect server error pages to the static page /50x.html

    error_page 500 502 503 504 404 /50x.html;
    location = /50x.html {
    root /usr/share/nginx/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;

    #}
    }

  • location 中 root 后面的路径是自己创建的,之后要将编译后的 Angular 项目拷贝到这里

  • 在 chrome 地址栏中输入:192.168.190.131/index.html ,前面的IP地址是 CentOS 的地址

  • 回车后页面显示出了我的测试内容“这里是index.html”,不过在浏览器控制台(F12)中打印出下面的错误提示:
    GET https://192.168.190.131/runtime-es2015.970e4ee50a9015fe307c.js net::ERR_CONNECTION_RESET

  • 首页中文字部分正常显示了,不过 js 和 css 文件都没有正常加载,我要如何解决?

  • 欢迎联系我:chan_chaw@126.com