首页 >

Angular项目如何上线?结合nginx来聊聊上线流程!

web前端|js教程Angular项目如何上线?结合nginx来聊聊上线流程!
Angular,Angular.js
web前端-js教程
Angular项目如何上线?下面本篇文章就来结合nginx聊聊Angular 项目的上线流程,希望对大家有所帮助!
展示小程序源码,vscode为什么不能高亮,ubuntu开机只有_,tomcat修改项目名,自学爬虫教学,php 抓取关键词,青岛seo推广公司哪家好,织梦网站标题在哪修改,dedecms购物网站模板下载lzw
微网站源码修改,ubuntu 设置键盘布局,tomcat官网上不去,java 爬虫亚马逊,河北php工具开发定制,seo石头lzw
当我们完成了 angular 项目之后,你应该如何上线呢?【相关教学推荐:《angular教学》】
c asp网页源码,ubuntu cuda6,tomcat8文件解析漏洞,怎么提取网络爬虫,php操作系统可以用吗,上海Seo推荐lzw
也许你会回答:

It is not my bussiness. Right?

确实,一个纯前端开发者,在完成了项目的开发之后,剩下的事情,你不用再接触接下来的上线内容。

但是,作为一个开发者,我们了解项目从开发到上线的流程是一件很重要的事情。

我们结合 nginx 来讲解一下。

打包项目

这里使用的是 angular-cli 生成的项目。开发完项目,你只要运行 npm run build 即可。builder 会根据你在 angular.json 中预设的打包内容进行输出。

outputPath: 打包后的存放的文件夹路径index: 挂载模版文件main: 项目的主入口文件…

完成之后,你可以通过 outputPath 查看到打包后的文件。

安装 Nginx

我们在要部署代码的机器上,即服务器,安装 Nginx。操作基于 centosyum 源操作。

# 安装nginxyum -y install nginx# 查看版本nginx -v# 启动nginxsystemctl start nginx.service# 访问 默认是80端口your_ip:80

配置Nginx

查看 Nginx 的配置文件 nginx.conf

/etc/nginx/conf.d 文件夹中添加文件新的配置文件,比如 demo.conf,并配置服务端的接口地址和前端的入口文件路径等:

upstream api {  server 127.0.0.1:8888; // 服务端  keepalive 2000;}server {  listen       [::]:80 default_server;  server_name  _;  root         /usr/share/nginx/demo-frontend/dist/demo-web; // 前端资源位置  location / {    add_header Access-Control-Allow-Origin *;  }  location /api { // api 处理    proxy_pass http://api;  }}# Settings for a TLS enabled server.#     server {#         listen       443 ssl http2 default_server;#         listen       [::]:443 ssl http2 default_server;#         server_name  _;#         root         /usr/share/nginx/frontend/demo.com/dist;#         ssl_certificate "/root/ssh/nginx/1_demo.com_bundle.crt";#         ssl_certificate_key "/root/ssh/nginx/2_demo.com.key";#         ssl_session_cache shared:SSL:1m;#         ssl_session_timeout  10m;#         ssl_ciphers HIGH:!aNULL:!MD5;#         ssl_prefer_server_ciphers on;#        # Load configuration files for the default server block.#        include /etc/nginx/default.d/*.conf;##        location / {#.         add_header Access-Control-Allow-Origin *;#        }# to api restful service#       location /api {#         proxy_pass http://api;#       }#        error_page 404 /404.html;#        location = /404.html {#        }#        error_page 500 502 503 504 /50x.html;#        location = /50x.html {#        }#     }

在上面的代码中,我们将前端的静态资源存放在 /usr/share/nginx/frontend/demo.com/dist/ 下,那么我们将打包出来的 dist/** 下的内容上传到这个目录文件就行。

一种比较简单的上传方案就是在用户本机直接执行:rsync -avzh 服务器用户名@62.**1.**.**:/usr/share/nginx/frontend/demo.com/dist/ /dist项目下的index.html及其同级的内容。将打包的内容同步到远程的服务器相应位置。之后重启 nginx,即 nginx -s reload 就算大功告成了。

总结

我们总结一下整个过程:

angular 项目打包

服务器安装 nginx

nginx 针对后端服务处理

nginx 针对前端内容处理

将 angular 打包文件上传到服务器指定位置

思路就是这么简单。当然,专业的工作还是留给运维同事,别太卷~

编程教学!!


  • 暂无相关文章
  • Posted in 未分类