Angular项目从新建、打包到nginx部署

魏明发布于2019-07-25 14:07 / 1415人阅读

摘要：三部署在官网中下载把文件夹下的打包文件拷贝到下并重命名为修改文件点击启动在浏览器中输入即可看到项目这个时候，我们只需要把打包发给朋友，然后告诉他点击后，在浏览器中输入即可。

最近我在给一个不懂计算机的朋友做一个小的应用程序，我想用Angular来做。一般我们在IDE上开发的时候都会用npm start或者ng serve来启动一个内部服务器，可是如果我把开发好的程序给朋友，怎么才能让他能够在自己的浏览器中打开呢？我这里选择了nginx服务器来部署我的程序。
一、新建Angular程序

安装nodejs

安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装angular cli
npm install -g @angular/cli

新建项目
ng new myProj

安装依赖包
在有package.json的目录下cnpm install

IDE中运行
ng serve 或 npm install，在localhost:4200中查看

二、打包
ng build,会在项目文件夹下生成dist文件，里面是打包后的文件。

三、部署

在nginx官网中下载nginx

把dist文件夹下的打包文件拷贝到nginx/html下并重命名为myProj

修改conf/nginx.conf文件

location / {
            root   html/myProj;
            index  index.html index.htm;
        }

点击nginx.exe启动nginx

在浏览器中输入localhost:80即可看到项目

这个时候，我们只需要把nginx打包发给朋友，然后告诉他点击nginx.exe后，在浏览器中输入localhost:80即可。

GPU服务器私有云 maven项目打包部署到云服务器 web项目打包部署到服务器上 maven项目打包发布到阿里云服务器部署前端到云服务器nginx

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/39726.html

一个网站的微服务架构实战（1）docker和 docker-compose

摘要：文件服务器项目为文章共享社区，少不了的就是一个存储文章的文件服务器，包括存储一些图片之类的静态资源。例如数据库的数据文件的配置文件和文件服务器目录。前言这是一次完整的项目实践，Angular页面+Springboot接口+MySQL都通过Dockerfile打包成docker镜像，通过docker-compose做统一编排。目的是实现整个项目产品的轻量级和灵活性，在将各个模块的镜像...

CODING 2019-07-25 14:35 评论0 收藏0
Angular6打包的那些事

摘要：在看看的配置下其中可以防止刷新的问题。这样我的可以用一个做代理，同时访问我的两个项目，两个项目。他们的地址是项目博客项目写着玩的，前端比较差以上可以说是解决了很大部分的坑了。 Angular在升级到6的时候，多了许多新的功能，比如ng命令，在从5升级到6的时候是无痛升级的，但是升级到了6之后，也有许多地方做了改变，比如Angular的设置，Angular的base-path等，通过在一...

CocoaChina 2019-07-25 14:28 评论0 收藏0
Angular 容器部署

摘要：很多人反应很难访问，所以转移到阿里云服务器上，因此做了一次完整的容器部署。在容器化过程中，我们并未配置任何等，只是保留服务所需的配置项而已，而这一部分我们可以放在反向代理层完成。很多人反应很难访问 Github Page，所以 ng-alain.com 转移到阿里云服务器上，因此做了一次完整的 Angular 容器部署。以下我会阐述 ng-alain 整个过程，其中包括 Docke...

tracy 2019-07-25 14:14 评论0 收藏0
Angular 容器部署

摘要：很多人反应很难访问，所以转移到阿里云服务器上，因此做了一次完整的容器部署。在容器化过程中，我们并未配置任何等，只是保留服务所需的配置项而已，而这一部分我们可以放在反向代理层完成。很多人反应很难访问 Github Page，所以 ng-alain.com 转移到阿里云服务器上，因此做了一次完整的 Angular 容器部署。以下我会阐述 ng-alain 整个过程，其中包括 Docke...

alighters 2019-06-28 16:23 评论0 收藏0
基于Flask-Angular的项目组网架构与部署

摘要：基于网，分享项目的组网架构和部署。项目组网架构架构说明流项目访问分为两个流，通过分两个端口暴露给外部使用数据流用户访问网站。通过进行配置，使用作为异步队列来存储任务，并将处理结果存储在中。基于Raindrop网，分享项目的组网架构和部署。项目组网架构 showImg(https://cloud.githubusercontent.com/assets/7239657/1015704...

kelvinlee 2019-06-24 17:48 评论0 收藏0