Angular项目部署到Nginx上

Moker_winddust

已于 2022-09-21 23:22:29 修改

阅读量2k

点赞数 3

分类专栏： angular的nginx部署文章标签： vscode

于 2022-09-21 22:56:32 首次发布

本文链接：https://blog.csdn.net/Moker_winddust/article/details/126981379

版权

angular的nginx部署专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这段时间其实由于要跟随前端主流技术，一直在自学AngularJs，而且还自己买了本书，也就是《AngularJs权威教程》，作者是Ari Lerner，另外也在看MOOC上的angular课程，想着到时候上完了顺便申请个学时认证。

对于上面这张图，其实对于很多在Angular的伙伴来说，应该很熟悉，整个的就是一个“简单的”angular小页面——内容简单，脚手架不简单。至于怎么入门AngularJs，我就不多说了，可以参看AngularJs中文网，里面有较为全面的学习步骤。

今天要讲的其实是跟Angular小页面部署到Nginx的操作，起因嘛，就是因为angular脚手架确实太繁杂了，一个.node_modules就包含上千个插件包，很多其实用不到。

即使是写个Hello World的Angular小页面，整个项目包也在200MB往上，所以……就在考虑如何简化不必要的文件，而去创建“轻量级”的项目（当然，Vue在这方面应该要稍微改善的多），但是网上看了很多，一无所获，反倒是看到了打包Angular项目的文章，心想着“反正学了Angular后面也要涉及类似的情况，不如直接学学吧”，抱着这样的心态看了一些文章，对于常见的操作步骤做一个简单的总结：

·首先是Nginx的下载安装，见Nginx官网，我下载的是这一个安装包，鉴于有人比较懒，我直接把下载链接搬过来：http://nginx.org/download/nginx-1.22.0.zip，记得找一个没有中文路径的目录，否则后面配置的时候会出错。

· 接着，你懂得，解压，大致内容如图，

· 现在我们来操作下VSCode上的Angular项目（希望你已经写好一个），打开终端（什么？不知道终端在哪？）

需要输入以下命令 :ng build，其实也有ng build --aot以及ng build --prod，但是鉴于我的设备没有成功，就没有深入考究了，就用ng build就OK的，build过程中可能会花点时间，需要耐心等待一下下

当看到有生成dist文件且没有报错的时候就说明build成功了，dist文件内的项目就是我们需要的，将它复制到（为啥要复制呢，当然还是因为我的设备在测试绝对路径的时候没有成功，没办法妥协了）我们的nginx文件的html文件下，即nginx/html文件下

·现在，win+R会吧?cmd会吧?cd到nginx文件目录会吧？

在start nginx后有一个窗口闪过，具体看有没有运行成功，你可以在浏览器输入localhost:80（可能下载的nginx文件不一样，具体的端口也不一样，后面教你怎么看），或者在任务管理器中看有无nginx.exe在运行即可。

成功运行nginx服务器后，浏览器查看localhost:80就可以看到nginx的官网提示了。

当然也可能运行不成功，即localhost:80无内容，任务管理器里也没有nginx.exe在运行，这时候可以看看nginx的日志，理论上，如果运行不成功，就只有error.log一个文件，可以直接文本文档打开查看，我出过一个错，是那个花括号问题，问题出在nginx\conf\nginx.conf配置文件里的严格语法，右括号}前一句没写分号;，就离谱，刚开始找了半天的问题>.<

问题是我们不是已经把build好的项目文件放到nginx/html里面了吗？为什么浏览器看到的还是nginx官网提示呢？这里就要说下关键的地方了，刚才提到了nginx\conf\nginx.conf，这需要我们进行一下下配置，其实可以吧nginx文件通过VS Code打开，就能在start nginx出错的时候查看错误日志，并单击直接跳转到错误位置。