Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Angular 项目结合 nginx 上线

Angular 项目结合 nginx 上线

作者头像
Jimmy_is_jimmy
发布于 2022-04-24 06:16:45
发布于 2022-04-24 06:16:45
97100
代码可运行
举报
文章被收录于专栏:call_me_Rcall_me_R
运行总次数:0
代码可运行

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第17天。

当我们完成了 angular 项目之后,你应该如何上线呢?

也许你会回答:

It is not my bussiness. Right?

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

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

我们结合 nginx 来讲解一下。

react 和 vue 同理

打包项目

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

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

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

安装 Nginx

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
# 安装nginx
yum -y install nginx

# 查看版本
nginx -v

# 启动nginx
systemctl start nginx.service

# 访问 默认是80端口
your_ip:80

配置Nginx

查看 Nginx 的配置文件 nginx.conf

使用 whereis nginx 进行查找 nginx 安装的位置

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 {
#        }
#     }

代码注释部分 TLS 是传输加密协议 https,需要添加相应的证书。

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

/usr/share/nginx/frontend/demo.com/dist/ 其实就是指向了 index.html 入口文件。

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

总结

我们总结一下整个过程:

  1. angular 项目打包
  2. 服务器安装 nginx
  3. nginx 针对后端服务处理
  4. nginx 针对前端内容处理
  5. 将 angular 打包文件上传到服务器指定位置

当然,你还要提前申请好相关的域名,相关证书等

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

【完】✅

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022/04/17 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
使用CentOS,Nginx部署前端项目
此时云服务器中运行了 webpack-dev-server 的服务器,默认访问 http://公网ip:8080 可查看浏览 器中的效果。注意, 8080 端口需要到云服务器实例的安全组中开放该端口的访问。
用户6833524
2021/07/15
1.7K0
如何强制 Nginx 将全站转向 WWW 和 HTTPS
01.在 /etc/nginx/conf.d目录下,新建配置文件example.com.conf
雪梦科技
2020/04/29
4.6K0
nginx如何代理多个express服务
背景是这样的,我目前有一台服务器,域名已经申请了brzhang.club,证书也申请了,可以看到是https的,安全访问无污染,哈哈!
老码小张
2019/05/13
2.2K0
使用Nginx防止IP地址被恶意解析
初始化ECS后会生成一个公网IP,默认访问IP地址自动访问80端口,此时通过ip地址可直接访问启动在80端口的服务。
Noneplus
2020/06/08
2.9K0
nginx实现https网站设置(SSL证书生成配置)
1.https简介 HTTPS其实是有两部分组成:HTTP + SSL / TLS,也就是在HTTP上又加了一层处理加密信息的模块。服务端和客户端的信息传输都会通过TLS进行加密,所以传输的数据都是加密后的数据 2.https协议原理 首先,客户端与服务器建立连接,各自生成私钥和公钥,是不同的。服务器返给客户端一个公钥,然后客户端拿着这个公钥把要搜索的东西加密,称之为密文,并连并自己的公钥一起返回给服务器,服务器拿着自己的私钥解密密文,然后把响应到的数据用客户端的公钥加密,返回给客户端,客户端拿着自己的私钥解密密文,把数据呈现出来
互联网-小阿宇
2022/11/21
2.8K0
nginx实现https网站设置(SSL证书生成配置)
Nginx 基础篇
安装Nginx Nginx被收录在EPEL Project中,因此安装Nginx前需先安装EPEL仓库 # yum -y install epel-release # yum -y install nginx 通过tree命令查看Nginx主体配置结构 # tree /etc/nginx/ . ├── conf.d #辅助配置文件 ├── default.d #通用(默认)配置文件 ├── fastcgi.conf #fas
用户1456517
2019/03/05
4970
Nginx 负载均衡配置+使用方法
# For more information on configuration, see: # * Official English Documentation: http://nginx.org/en/docs/ # * Official Russian Documentation: http://nginx.org/ru/docs/ user root; worker_processes auto; error_log /var/log/nginx/error.log; pid /ru
双面人
2019/10/23
5310
Vue的Nginx前端代理配置
当用vue开发好前端需要打包时,一般都需要配置下代理方便访问后台接口,避免出现找不到链接或者跨域问题。
杨永贞
2022/01/07
2.3K0
nginx实现https网站设置(SSL证书生成配置)
1.https简介 HTTPS其实是有两部分组成:HTTP + SSL / TLS,也就是在HTTP上又加了一层处理加密信息的模块。服务端和客户端的信息传输都会通过TLS进行加密,所以传输的数据都是加密后的数据 2.https协议原理 首先,客户端与服务器建立连接,各自生成私钥和公钥,是不同的。服务器返给客户端一个公钥,然后客户端拿着这个公钥把要搜索的东西加密,称之为密文,并连并自己的公钥一起返回给服务器,服务器拿着自己的私钥解密密文,然后把响应到的数据用客户端的公钥加密,返回给客户端,客户端拿着自己的私钥解密密文,把数据呈现出来
全栈程序员站长
2022/06/29
5.7K0
nginx实现https网站设置(SSL证书生成配置)
Typecho Nginx 使用https加密访问实现方式(解决其他页面404问题)
躺平程序员老修
2023/09/05
5770
使用nginx配置一个ip对应多个域名
需求:--两个域名想指向同一个网站ip;解决:--如果不需要https的证书访问,其实不需要配置,在域名解析中,分别添加同一个ip即可,通过dns解析,映射到同一个网站上;如果需要https访问,就需要配置一下443端口了;首先申请一下ssl证书,选择nginx部署;多个域名只需要,添加sever配置既可;在http{}中新增server配置;原有server server { listen 80 default_server; server_name www.**
JQ实验室
2022/10/30
7.6K0
centos 安装php73 fast cgi+ nginx
我的linux版本 [root@izuf693wyms6h7ot360phcz live.jiushu8.com]# lsb_release -a LSB Version: :core-4.1-amd64:core-4.1-noarch Distributor ID: CentOS Description: CentOS Linux release 7.6.1810 (Core) Release: 7.6.1810 Codename: Core [root@izuf69
xiny120
2019/06/11
9160
部署上线-Nginx设置
Nginx(“engine x”)是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的 Web和 反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。和apache一样,都是web服务器软件,因为其性能优异,所以被广大运维喜欢。又因为nginx是一个轻量级的web服务器,相比apache来说资源消耗更低
星哥玩云
2022/09/14
7430
部署上线-Nginx设置
SpringBoot + Vue 项目部署上线到 Linux 服务器
给大家分享以下我是如何部署 SpringBoot + Vue 前后端分离的项目的,我用的 Linux 发行版是 CentOS7.5
Gorit
2021/12/08
2.1K0
SpringBoot + Vue 项目部署上线到 Linux 服务器
CentOS 7.6配置Nginx反向代理
利用三台CentOS 7虚拟机搭建简单的Nginx反向代理负载集群,三台虚拟机地址及功能介绍
星哥玩云
2022/07/27
9040
零依赖!使用acme.sh设置nginx多个https证书自动更新,无限续期https证书
在谷歌的推动下, 网站支持https几乎成了刚需,而免费的https证书大多只有一年的使用时间,且二级子域名需要单个申请,而遇到https证书失效的情况, 基本就是一次生产事故,为了彻底解决以上问题, 本文提供一种通用的, 无限续期https证书的教程。
zhaoolee
2021/06/29
13.2K1
Nginx入门指北
Nginx (engine x) 是一款轻量级的 Web 服务器 、反向代理服务器及电子邮件(IMAP/POP3)代理服务器。
玖柒的小窝
2021/10/21
4030
Nginx入门指北
使用nginx部署网站
如果服务器只需要放置一个网站程序,解析网站到服务器的网站,网站程序监听80端口就可以了。如果服务器有很多应用,借助nginx不仅可以实现端口的代理,还可以实现负载均衡。本文将详细介绍前端及nodeJS项目在服务器配置时需要用到的nginx配置。
java思维导图
2019/11/05
2.8K0
CentOS7下yum安装Nginx并启用https
EPEL (Extra Packages for Enterprise Linux) 是由 Fedora Special Interest Group 为企业 Linux 创建、维护和管理的一个高质量附加包集合适用于但不仅限于 Red Hat Enterprise Linux (RHEL), CentOS, Scientific Linux (SL), Oracle Linux (OL)
yuanfan2012
2020/04/08
4.8K0
CentOS7下yum安装Nginx并启用https
部署上线-部署Django项目
启动命令:python manage.py runserver 0.0.0.0:8000
星哥玩云
2022/09/14
1.7K0
部署上线-部署Django项目
相关推荐
使用CentOS,Nginx部署前端项目
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档