028-86261949

当前位置:首页 > 学科资讯 > 将Heroku用于静态Web目录

将Heroku用于静态Web目录

2020/05/14 09:42 分类: 学科资讯 浏览:1

本文介绍了一个新的Heroku帐户的建立,并重点介绍了在这个新的服务平台(PaaS)生态系统中引入一个Java API(用Spring Boot编写)连接到一个ClearDB实例,我的主要目标是找到一种解决方案,使我的有限时间专注于提供业务解决方案,而不是跟上DevOps进程。

 

 

AWS S3替代方案

AmazonAWS简单存储服务(S3)令人惊叹。那些有兴趣寻找令人兴奋的案例研究的人,只需看看Netflix或Airbnb提供的服务,就可以了解对象服务平台对于高要求的应用程序的响应性和可伸缩性。

虽然AMHS应用程序在任何级别上都不能与Netflix或Airbnb相比,但我最初选择AWS S3是因为它是定位角应用程序静态文件的正确位置。我想让客户端代码和服务器代码在相同的基本服务上运行,这证明了我的决定是正确的。

当我开始思考静态内容时,我不确定Heroku模型中的情况如何。在做一些快速的研究时,很明显,我并不是唯一一个拥有这个用例的人。事实上,所有的结果都让我找到了相同的解决方案--只需使用Node.jsExpress服务器来承载客户端的静态文件。因此,我将在Heroku中为客户机运行一个应用程序,就像运行RESTfulAPI一样。

 

创建amhs-angular应用

按照“目的Heroku”文章中相同的基本步骤,我创建了一个名为amhs-angular来存放棱角的客户端代码。

Creating new app in Heroku

 

 

 

 

 

 

 

 

 

 

 

 

由于这将是一个静态的web应用程序,没有必要为该服务配置任何附加组件。我可以使用HerokuCLI使用以下命令执行相同的过程:

heroku create amhs-angular

接下来,我添加了amhs-angularHeroku项目作为AMHS REAR客户端Git存储库中的远程项目,使用以下命令:

heroku git:remote -a amhs-angular

答复如下:

set git remote heroku to https://git.heroku.com/amhs-angular.git

以下git命令验证了Remote的正确设置:

$git remote -v

更新角以在节点快车内运行

当对静态客户端文件使用AWS S3时,我按照以下步骤提供了一个可公开访问的AMHS客户端版本:

  1. 使用ng build --prod命令
  2. 导航到AWS\STORE\S3
  3. 单击AMHS桶
  4. 将所有文件拖到/dist文件夹进入AWS中的主文件屏幕。
  5. 选择所有文件并授予适当级别的安全性。

对于Heroku,计划使用Node.jsExpress服务器托管这些文件。在AMHS角客户端项目的终端中,我执行了以下命令以包含快递服务器:

$ npm install express --save

接下来,我需要更新package.json"start": "node server.js"还包括"postinstall": "ng build --output-path dist"执行角形构造。

下面是package.json更新后:

"scripts": {
   "ng": "ng",
   "start": "node server.js",
   "build": "ng build --prod",
   "test": "ng test",
   "lint": "ng lint",
   "e2e": "ng e2e",
   "postinstall": "ng build --output-path dist"
},

 

 


我还需要包括一个"engines"属性,在与"scripts"package.json:
},
"engines": {
"node": "11.15.0",
"npm": "6.7.0"
}

 

接下来,一个泛型server.js需要创建(上面引用的)文件。内容如下:
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static('./dist'));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname,'/dist/index.html'));
});
app.listen(process.env.PORT || 8080);

最后,我需要更新environment.prod.ts引用正确的回调URL和在“目的Heroku”文章中创建的API的角文件:
api: 'https://amhs.herokuapp.com',
redirectUrl: 'https://amhs-angular.herokuapp.com/implicit/callback'

 

此时,当部署客户端时,就可以利用Node.jsExpress服务器来承载/dist文件夹,调用/dist/index.html当调用https://amhs-angular.herokuapp.com URL时。

 

应用程序增强

除了进行上述更改外,我还想向AMHS应用程序介绍一些新特性。积压的两个项目如下:

  • 引入删除属性的能力
  • 允许管理用户删除工作人员

随着必要的API更改已经到位,我继续并更新了角客户端。属性列表现在包含每个属性的“删除”按钮:

Delete property functionality

 

 

 

 

 

删除属性是一个简单的操作,在执行实际删除之前包含一个确认模式:

Delete property functionality

 

 

 

 

 

 

 

 

 

 

“工作人员”视图还包括一个“删除”按钮:

Delete staff functionality

 

 

 

 

 

 

 

对工作人员来说,事情要复杂一些。基本业务规则如下:

  1. 如果工作人员的销售与现有财产挂钩,则不应删除该工作人员。
  2. 如果工作人员是任何在职工作人员的管理人员,则不应删除该工作人员。
  3. 在任何一种条件都不允许的情况下,建议是使该工作人员不活动。

使用此逻辑,当不满足条件#1时,将出现以下模式:

Inactive staff functionality

 

 

 

 

 

 

 

 

 

 

同样,未能满足条件#2将生成如下所示的模态:

Inactive staff functionality

 

 

 

 

 

 

 

 

 

 

当可以删除工作人员时,将出现以下确认模式:

Delete staff functionality

 

 

 

 

 

 

 

 

 

在验证所有内容都按预期工作之后,所有上述更改都被签入AMHS角客户端存储库的主分支中。

将更改推送给Heroku

使用AMHS角客户端存储库中的代码进行检查,并将Heroku远程设置用于amhs-angular项目中,使用以下命令将代码部署到Heroku:

git push heroku

以下命令提供了有关部署的最新信息:

-----> Node.js app detected

-----> Creating runtime environment
       NPM_CONFIG_LOGLEVEL=error
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       NODE_VERBOSE=false
-----> Installing binaries
       engines.node (package.json):  11.15.0
       engines.npm (package.json):   6.7.0
       Resolving node version 11.15.0...
       Downloading and installing node 11.15.0...
       npm 6.7.0 already installed with node
-----> Restoring cache
       - node_modules
-----> Installing dependencies
       Installing node modules

       > fsevents@1.2.12 install /tmp/build_d2400638d424ad7a3269162acc30fb7e/node_modules/fsevents
       > node-gyp rebuild
       gyp info it worked if it ends with ok
       gyp info using node-gyp@3.8.0
       gyp info using node@11.15.0 | linux | x64
       gyp http GET https://nodejs.org/download/release/v11.15.0/node-v11.15.0-headers.tar.gz
       gyp http 200 https://nodejs.org/download/release/v11.15.0/node-v11.15.0-headers.tar.gz
       gyp http GET https://nodejs.org/download/release/v11.15.0/SHASUMS256.txt
       gyp http 200 https://nodejs.org/download/release/v11.15.0/SHASUMS256.txt
       gyp info spawn /usr/bin/python2
       gyp info spawn args [ '/tmp/build_d2400638d424ad7a3269162acc30fb7e/.heroku/node/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
       gyp info spawn args   'binding.gyp',
       gyp info spawn args   '-f',
       gyp info spawn args   'make',
       gyp info spawn args   '-I',
       gyp info spawn args   '/tmp/build_d2400638d424ad7a3269162acc30fb7e/node_modules/fsevents/build/config.gypi',
       gyp info spawn args   '-I',
       gyp info spawn args   '/tmp/build_d2400638d424ad7a3269162acc30fb7e/.heroku/node/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
       gyp info spawn args   '-I',
       gyp info spawn args   '/app/.node-gyp/11.15.0/include/node/common.gypi',
       gyp info spawn args   '-Dli

查看Heroku控制台,将显示以下信息:

Successful build in Heroku

 

 

 

 

现在,以下URL已经就绪并可用

 

使用时,将与Okta集成以显示AMHS应用程序的登录屏幕:

Integration with Okta

 

 

 

结语

使用Heroku作为AMHS角度客户端,部署从许多手动步骤减少到一个单独的git命令:

git push heroku

实际上,使用GitLab中的CI/CD功能(其中包含AMHS源代码),可以使用一个非常基本的管道实现流程的自动化,该管道在存储库的主分支发生更改时触发。

虽然我确信在AWS S3中有一种方法可以自动化相同的步骤,但是需要更多的时间来学习技术的各个方面,而这些方面并不专注于向我的客户端提供特性和功能。

 

#标签:Heroku,Web目录,前端开发,H5前端