Angular 项目部署到服务器(CentOS 7.2)

最近刚开始接触Angular,按照Angular文档中的快速上手的教程完成了一个项目(my-app),本地运行毫无压力,就想着把项目部署到自己的服务器上,按照网上的教程,我这新手一时半会也没能搞定,看到有人说跟本地一个流程,也是先装环境,但是在远程服务器上安装环境遇到了问题,就是安装完Angular CLI后ng命令不好使,甚至还有些人的做法是把本地的环境文件,项目文件上传到远程服务器上,传完一个简单的项目花了好久时间,就放弃上传环境了(感觉不靠谱),看官方的文档,将 build 好的 dist 目录下的文件托管在任何支持静态文件的 Web 服务器上就可以,然后决定用Node.js:

1、手动搭建Node.js环境

2、按照上一步的教程,在 /dist/my-app/ 目录下创建了 index.js;

3、再结合这位大神的博客,最后成功了!

4、在 index.js 所在的目录(/dist/my-app/)输入指令 node index.js 启动服务,然后在浏览器输入对应的主机名称+端口号(我的服务器没域名,使用的公网IP)即可浏览web页面:

5、最后附上 index.js 的代码:

const http = require('http');
const url = require('url');
var fs = require('fs');
const hostname = '0.0.0.0';
const port = 4200;
const server = http.createServer((req, res) => {
    let pathName = url.parse(req.url).pathname;
    pathname = pathName == '/' ? 'index.html' : pathName.substring(1);
    console.log('### req.url=' + req.url);
    console.log('### pathName=' + pathName);
    console.log('### pathname=' + pathname);

    fs.readFile('' + pathname, function(err, data) {
        if (err) {
            console.log('404');
        } else {
            var fileType = '';
            if (pathname.endsWith('.html')) {
                fileType = 'text/html';
            } else if (pathname.endsWith('.css')) {
                fileType = 'text/css';
            } else if (pathname.endsWith('.js')) {
                fileType = 'text/javascript';
            } else {
                fileType = 'application/octet-stream'; //二进制,项目没用到,暂时先这么写了
            }
            console.log('200');
            res.writeHead(200, { "Content-Type": fileType + ";charset='utf-8'" });
            res.write(data);
            res.end();
        }
    });


});
server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
});

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值