🌄 📓 🦌 どうやってAB-DOCをしますか 👍🏾 👨🏼‍🚒 🥧

この記事では、私たちと、Amazon S3ストレージへのインターフェースを提供するサーバーレスWebアプリケーションであるAB-DOCについて説明します。以前の記事でAB-DOCの詳細を読むことができます。次に、AB-DOCの基礎となる技術ソリューションに焦点を当てます。開発および展開プロセスをどのように構築したかを説明します。

写真では、自宅のデスクにいて、90％の時間働いています。

私たちには小さなチームがあり、ビジネス自動化のためのWebアプリケーションを開発しています。カスタムプロジェクトの実行に加えて、2つのオンラインサービスを作成および開発しています。

AB-DOC情報の保管およびシステム化サービス
タスクトラッカーAB-TASKS

チーム全員がAB-DOCに取り組んでいるわけではありませんが、私とIgorBBの 2人だけです。

それでは、AB-DOCとは何ですか？

サーバーレスアーキテクチャ

サーバーレスアプリケーションは、現在、Web開発の世界で強力なトレンドとなっています。簡単に言えば、これらは完全にクラウドプロバイダーのサービスに基づいて動作するアプリケーションです。それらの利点は、それらを機能させるクラウドサービスの特性（フォールトトレランスとスケーラビリティ）に由来します。さらに、クラウドサービスと同様に、それらのコストは負荷に直接依存します。負荷がない場合、コストはゼロです。それは非常に快適で素晴らしいです。

しかし、コインには裏返しがあります。サーバーレスアプリケーションの最初の欠点は、複雑な開発プロセスです。つまり、インフラストラクチャの初期構成および開発プロセスの構築の段階では、サーバーを備えた通常のWebアプリケーションよりも多くの労力が必要です。 2番目の欠点は、このようなアプリケーションは通常ベンダーに依存しているため、別のクラウドプロバイダーに移行するのは困難な作業になる可能性があることです。

Amazon Web Servicesでアプリケーションを作成しているため、この記事のすべてはこのクラウドプロバイダーを参照します。

通常、サーバーレスアプリケーションにはバックエンドがあります。バックエンドは、サービスDynamoDB（NOSQL DBMS）またはRDS（リレーショナルDBMS）の形式のデータベースです。バックエンドのコードはLambda関数として実装され、API Gatewayを介してアクセスされます。

AB-DOCにはこれはありません。通常、バックエンドとサーバーコードはありません（少なくともまだ）。

AB-DOCアーキテクチャは次のようになります

アプリケーションコード（HTML、CSS、JavaScriptなど）は別のS3バケットにあり、CDN CloudFrontを介して提供されます。原則として、バケットでは静的コンテンツをホストする機能を有効にできるため、S3から直接提供できます。

CloudFrontが必要な理由は、コンテンツの読み込みを高速化するだけでなく、すべてのリンクをindex.htmlにリダイレクトする方法が必要だったためでもありました。 AB-DOCは単一ページアプリケーション（SPA）であるため、URLを要求する場合、ユーザーを読み込むためにindex.htmlが必要です。さらに、リクエストされたURLに基づいて、JavaScriptはajaxを使用してユーザーに必要なコンテンツを読み込みます。フロントエンドフレームワークは使用しないため、独自の小さなルーターを作成しました。

したがって、すべてのURLをindex.htmlにリダイレクトするには、CloudFrontで404エラー処理ルールを設定します（ページが見つかりません）。

このルールのおかげで、CloudFrontは、リソースに存在しないURLのリクエストに応じて、200の応答コードでindex.htmlを提供します。これは、S3でコードをホストするSPAを実装するための魔法です。

ユーザーコンテンツもS3の別のバケットでホストされ、CloudFrontを通じても提供されます。カスタムコンテンツには、ツリー構造（Json）、ドキュメントコンテンツ（HTML）、ドキュメントに埋め込まれた画像、および添付ファイル（さまざまな形式）が含まれます。

さらに、私の意見で興味深い個人、アプリケーションの実装のニュアンスについてお話します。

認証と承認

コードをユーザーのブラウザにダウンロードした後、AB-DOCは最初にユーザーを認証および承認します。このために、Cognitoを使用します。

認証はユーザーを認証するプロセスであり、承認はこのユーザーにプログラムで作業する特定の権利を与えるプロセスであることを思い出させてください。

Cognitoは3つのサービスで構成されています。

ユーザープール
フェデレーションID
同期する

Cognitoサービスの経験がなかった場合、各サービスが必要な理由を理解することは困難です。これを理解する方法を書いています。

ユーザープール

これは、ユーザーの登録、認証（認証）、およびアカウントのストレージを提供するマネージドサービスです。各ユーザーのデータフィールド（格納するもの）、パスワードの複雑さのポリシー、MFAを使用するかどうか、登録中に起動できるさまざまなトリガー、ログインなどを構成できます。ここで、ユーザーを登録するときにサービスが電子メール検証のために送信するメッセージを構成できます。

外部IDプロバイダー（Facebook、Google、Amazon、またはSAML）をユーザープールに添付できます。外部プロバイダーを介してログインすると、ユーザープールにアカウントが作成されます。これは基本的に、Cognitoサービス自体がホストするログインページを使用する場合に機能します。つまり、ユーザーをリダイレクトして、your-app.auth。[Region] .amazoncognito.comという形式の特別なURLを入力する必要があります。このページの外観は、アプリケーションの外観のようにカスタマイズできます。承認後、ユーザーはアプリケーションに戻ります。私はこの実装オプションが好きではありませんでした。

JavaScript用Amazon Cognito Identity SDKを使用して、ユーザープールを外部プロバイダーと統合することをかなり長い間試みました。理論的には、これも可能ですが、このテーマに関するドキュメントを見つけることができず、私はあきらめました。それは2〜3ヶ月前でした。

フェデレーションID

ユーザープールとは異なり、このサービスはユーザーを承認する責任があります。つまり、AWSサービス（S3など）にアクセスする特定の特権をユーザーに付与します。

このサービスが機能するには、IDプールを作成し、それが機能する認証プロバイダーを構成する必要があります。ユーザープールは、認証プロバイダーとしてだけでなく、Amazon、Facebook、Google、Twitter、OpenID、SAMLなどの多くの外部プロバイダー、または自分で作成した認証プロバイダーとしても機能します。

AB-DOCでは、ユーザープールと1つの外部プロバイダーであるGoogleを認証プロバイダーとして使用します。したがって、ユーザーには2つのオプションがあります。

新しいアカウントを作成します（ログインパスワードを作成し、メールを確認します）。この場合、ユーザープールにアカウントが作成され、次にIDプールにアカウントが作成されます。これにより、彼は必要な権限を取得します。
Googleアカウントでサインインします。その後、ユーザープールのアカウントは作成されず、ユーザーはIDプールにアカウントを作成するだけで、アプリケーションを操作するために必要な権限が与えられます。

IDプールでの権限付与のプロセスは非常に簡単です。 IDプールの場合、AWS Identity and Access Management（IAM）から2つのロールが選択されます：認証済みユーザー用と非認証ユーザー用。

IAMの各ロールに対して、ユーザーに必要な権限を任意に付与するポリシーを添付できます。ポリシーで変数を使用することで、個別化が可能です。たとえば、S3バケットのフォルダー内でのみユーザーに書き込みアクセスを許可するには、リソースの説明でこのような変数を使用します

... "Resource": [ "arn:aws:s3:::ab-doc-storage/${cognito-identity.amazonaws.com:sub}", "arn:aws:s3:::ab-doc-storage/${cognito-identity.amazonaws.com:sub}/*", ] ...

したがって、各ユーザーの$ {cognito-identity.amazonaws.com:sub}の代わりに、アイデンティティプール内のユーザーの識別子がポリシーに代入されます。各ユーザーは、バケット内の自分のフォルダー内で作業します。この名前は、IDプールのIDに対応しています。

S3には実際にはフォルダーがないため、ここのフォルダーという言葉は引用符で囲むことができます。これはフラットファイルシステムです。各ファイルには単純にキー（キー）があり、条件付きで「フォルダー」に分割されます。

同期する

このサービスは、アプリケーションのユーザーデータのストレージを提供します。 Syncでホストされるデータは、IDプールのユーザーIDにバインドされたキーと値のセット（データセット）として保存されます。したがって、Syncを使用すると、ユーザープールまたは外部プロバイダーであるかどうかにかかわらず、認証されないすべてのユーザーの任意の情報を保存できます。さらに、Syncは、ユーザーがアプリケーションで作業しているすべてのデバイス間でデータセットの同期を提供します。

一般に、認可はトークンに基づいて構築されます。それを担当するJavaScriptコードは、現在、アプリケーションコード全体の1/3以上を占めています。つまり、これはかなり膨大なトピックであり、これについては今後別の記事を書くかもしれません。

変更とイベントキューを追跡する

AB-DOC自体は、ツリーノードまたはドキュメントのコンテンツを編集するときにユーザーが加えた変更を追跡して保存します。

このメカニズムの動作は、JavaScriptタイマーsetInterval（）に基づいています。ツリー用とドキュメント用に別々のタイマーが作成され、3秒ごとに変更が発生しているかどうかが確認され、発生した場合はS3に保存されます。アプリケーションのタイマーは、TIMERSオブジェクトを介して中央で作成されます。

一元化された変更追跡のために、イベントキューを管理するACTIVITYオブジェクトを作成しました。キューは、ユーザーが作成できるコンテンツのオプションに従って形成されます。ツリーには独自のキューがあり、ドキュメントには独自のキューがあり、各キューには独自のキューがあります。

キューに記録されるイベントには、保留または保存の2種類があります。キューのロジックは次のとおりです。

ユーザーが何らかの編集を行うと、待機イベントが目的のキューに追加されます。ツリーでは、イベントは変更を処理するコードから直接追加され、ドキュメントの変更はMutation Observerのおかげで追跡されます。

さらに、対応するタイマーがトリガーされると、保存イベントがキューに追加され、S3に変更をロードするプロセスが開始されます。ダウンロードが成功すると、このキューは最後の保存イベントまでクリアされます。クリアの時点で、キューには次の3秒サイクルを待機する新しい待機イベントが既にある場合があります。

これは、ドキュメントの変更を担当するドキュメント変更キューの例でどのように見えるかです。

ヘッダーの変更インジケータは、イベントキューのステータスを反映しています。

何も起こらず、すべてのキューが空の場合、インジケータは表示されません。

キューに待機中のイベントがある場合、オレンジ色の鉛筆で表されます。

保存中のキューがある場合、インジケータは白に変わります。

キューが空ではなく、ユーザーがブラウザを閉じようとするか、単にページを離れようとすると、window.onbeforeunload（）関数が機能します。彼女は、編集内容がまだ保存されていないことをユーザーに警告します。彼は、保存が完了するまで待つか、最後の変更を失ってページを離れることができます。

インジケーターは、$更新変数に書き込まれます。

 $update = $('#update');

オブジェクトコードタイマー

 //TIMERS object //tracks all timers and prevents memory leaks //call TIMERS.set('name') to create new timer //call TIMERS.<timer_name>.destroy() to destroy timer //call TIMERS.<timer_name>.execute() to execute timer TIMERS = { on: true, //timers are ON when true set: function(callback, interval, name){ if(['on', 'set', 'execute', 'destroy', 'Timer'].indexOf(name) !== -1){ throw new Error('Invalid timer name: ' + name); } if(this.hasOwnProperty(name) && this[name].id !== 0){ //automatically clears previous timer this[name].destroy(); } if(this.on || PRODUCTION){ this[name] = new this.Timer(callback, interval); } else { this[name] = { id: 0, execute: callback, destroy: function(){ void(0); } } } }, Timer: function(callback, interval){ //timer constructor this.id = setInterval(callback, interval); this.execute = callback; this.destroy = function(){ clearInterval(this.id); }; } };

アクティビティオブジェクトコード

 //ACTIVITY object //stores activities states and updates indicator in navbar. //Activities: doc edit, file [guid] upload, file [guid] delete or whatever. //Two possible states: pending or saving. //Each activity on each specific object must be reported independently! //"saving" class is "!important", so it dominates if both classes are active ACTIVITY = { lines: {}, //each activity has own line of pending and saving events push: function (activity, state){ var self = this; if(this.lines.hasOwnProperty(activity)){ this.lines[activity].push(state); } else { this.lines[activity] = [state]; } this.refresh(); return self; }, get: function(activity){ var self = this; if(this.lines.hasOwnProperty(activity)){ var length = this.lines[activity].length; return this.lines[activity][length-1]; } else { return undefined; } }, flush: function(activity){ var self = this; if(this.lines.hasOwnProperty(activity)){ var index = this.lines[activity].indexOf('saving'); if(index !== -1){ this.lines[activity] = this.lines[activity].slice(index+1); } } this.refresh(); return self; }, drop: function(activity){ var self = this; if (this.lines.hasOwnProperty(activity)){ delete this.lines[activity]; this.refresh(); } return self; }, refresh: function(){ var keys = Object.keys(this.lines), pending = false, saving = false; for (var i = 0; i < keys.length; i++) { pending = pending || this.lines[ keys[i] ].indexOf('pending') !== -1; saving = saving || this.lines[ keys[i] ].indexOf('saving') !== -1; } pending ? $update.addClass('pending') : $update.removeClass('pending'); saving ? $update.addClass('saving') : $update.removeClass('saving'); } }

繰り返しますが、ドキュメントの例では、プロセスは次のようになります。ドキュメントを開くと、ドキュメントの内容を変更するイベントハンドラーがハングします（内部にはMutation Observerです）。ハンドラーは単に待機イベントをドキュメント変更キューに追加します。

 editor.on('text-change', function () { ACTIVITY.push('doc modify', 'pending'); });

ドキュメントタイマーは3秒ごとに1回、ドキュメント変更キューで待機イベントをチェックし、必要に応じてS3にドキュメントのコンテンツをロードし、キューをクリアします。

 TIMERS.set(function () { if(ACTIVITY.get('doc modify') === 'pending'){ ACTIVITY.push('doc modify', 'saving'); var params = { Bucket: STORAGE_BUCKET, Key: self.ownerid + '/' + self.docGUID + '/index.html', Body: self.editor.root.innerHTML, ContentType: 'text/html', ContentDisposition: abUtils.GetContentDisposition('index.html'), ACL: 'public-read' }; Promise.all([ s3.upload(params).promise(), new Promise(function(res, rej) { setTimeout(res, 800); }) ]).then(function(){ ACTIVITY.flush('doc modify'); }).catch(function(){ g.abUtils.onWarning(g.abUtils.translatorData['couldNotSave'][g.LANG]); }); } }, 3000, 'doc');

S3での読み込みが通常非常に高速であるという事実に関連する面白い瞬間があります。したがって、保存インジケーターがちらつかないように、2つのPromiseが完了するとトリガーされるPromise.all（）を使用します。実際にはs3.upload（）と0.8秒続く小さなsetTimeout（）です。これは、実際に変更がより速く読み込まれた場合でも、インジケーターが少なくとも0.8秒の節約を示すために必要です。

S3でのデータのロードと保存

S3の各ユーザーには、IDプールのIDと一致する名前の個別のフォルダーが割り当てられます。このフォルダのルートで、AB-DOCはユーザーツリー構造を格納するtree.jsonファイルを保存します。

tree.jsonファイル形式は次のとおりです。

 [ { "id": "GUID  ()", "name": "  ()", "children": [ { "id": "...", "name": "...", "children": [...] }, { "id": "...", "name": "...", "children": [...] }, ... ] }, { "id": "GUID  ()", "name": "  ()", "children": [ { "id": "...", "name": "...", "children": [...] }, { "id": "...", "name": "...", "children": [...] }, ... ] }, ... ]

この構造は、ツリーをレンダリングするときにzTreeのデータソースとして変更なしで使用されます。

各ドキュメントは個別のサブフォルダに保存され、その名前はドキュメントのGUIDと一致します。このフォルダー内に、実際にはドキュメントであるindex.htmlファイルが保存されます。このファイルに加えて、ドキュメントに挿入された画像は個別のオブジェクトとしてドキュメントフォルダーに保存され、添付ファイルのサブフォルダーにはドキュメントに添付されたすべてのファイルが保存されます。

すべてのデータは、AWS JavaScript SDKのupload（）関数を使用して、ユーザーのブラウザーからS3に直接ダウンロードされます。彼女は、S3にファイルをアップロードし、それらを部分に分割（マルチパートアップロード）し、いくつかのストリームでこれを行う方法を知っています。

たとえば、これはドキュメントに添付されたファイルが4つのストリームにロードされ、それぞれ6 MBの部分に分割される方法です。このコードはabDocオブジェクト（ドキュメント）内で動作します。この場合はself =このオブジェクトのthisです。

 ACTIVITY.push('doc file upload', 'saving'); var fileGUID = abUtils.GetGUID(), key = self.ownerid + '/' + self.docGUID + '/attachments/' + fileGUID, partSize = 6 * 1024 * 1024; var file_obj = { guid: fileGUID, name: file.name, iconURL: abUtils.mimeTypeToIconURL(file.type), key: key, size: file.size, percent: '0%', abortable: file.size > partSize //only multipart upload can be aborted }; var params = { Bucket: STORAGE_BUCKET, Key: key, Body: file, ContentType: file.type, ContentDisposition: abUtils.GetContentDisposition(file.name), ACL: 'public-read' }; var upload = s3.upload(params, {partSize: partSize, queueSize: 4}); upload.on('httpUploadProgress', function(e) { var $file = $('.file-container[data-guid='+fileGUID+']'); if(!$file.hasClass('freeze')){ file_obj.percent = Math.ceil(e.loaded * 100.0 / e.total) + '%'; var $file_size = $file.find('.file-size'); $file_size.css('width', file_obj.percent); if($file_size.attr('data-text')){ $file_size.text( file_obj.percent ); } } }); upload.send(function(err, data) { if(err) { if (err.name !== 'RequestAbortedError') { abUtils.onError(err); } } else { var params = { Bucket: data.Bucket, Prefix: data.Key }; s3.listObjectsV2(params, function(err, data) { if (err) { abUtils.onError(err); } else { file_obj.modified = data.Contents[0].LastModified; self.updateFilesList(); ACTIVITY.flush('doc file upload'); } }); } });

httpUploadProgressイベントを使用すると、ダウンロードの進行状況を追跡し、ファイルの進行状況バーを更新できます。

s3オブジェクト（AWS JavaScript SDK）は、ID IDプール、ユーザーのトークンID、認証プロバイダーの名前を含む資格情報を使用します。 S3サービスへのすべての呼び出しは、ユーザーIDトークンの転送で行われます。ユーザーには、ロールに関連付けられたポリシーで規定されている権利が付与されます。このポリシーは、アイデンティティプールで設定されます。同じ原則がJavaScript SDKを介して他のAWSサービスで機能します。 IDトークンの有効期間は短い（1時間）後、更新トークンを使用して新しいIDトークンを取得する必要があります。リフレッシュトークンの有効期間は365日です。

空き容量インジケータ

一見、これは非常に単純なことのように思えるかもしれませんが、完全に真実ではありません。

空きスペースのインジケータをバスケットの形で作成しました。下部が狭く、上方に向かって広がっています。視覚的に充填可能なバスケットを、そのようなバスケットが物理的な世界でどのように満たされるかと対応させたいと考えました。つまり、下から狭くなるため、最初はすぐにいっぱいになります。そして、それがいっぱいになると、レベルは上向きに拡大するため、ゆっくりと上昇します。

これを実現するために、四角形のガウス面積式を使用しました。

この式を使用して、バスケット上のポイントの座標からバスケット全体の面積を計算できます。これは、1 GBの最大空き領域制限に対応します。さらに、ユーザーが満たしたボリュームの値に基づいて、単純な比率を使用して、ユーザーが占有するバスケットの部分の面積を計算します。

ユーザーが領域を占有すると、上記の式に基づいて、塗りつぶされたスペースの上部境界のY座標を計算します。占有スペースの上部ポイントのX座標は、バスケットのコーナーの接線を介して表示されます。一般に、Yの導出の結果、ひどい見た目ですが、普通の2次方程式が得られました。ボード上の右下隅にあります。

黒板では、サイズはバスケットが収まる正方形の辺の長さを示します。たとえば、ボードでは、サイズ= 30です。一般的な式を導出する必要があったため、表記サイズを使用しました。

さて、これらの行を書くと、あいまいな疑問が入り込んだ。おそらく、私は非常に賢く、数字が二等辺台形であると仮定すると、はるかに推測しやすいでしょう...

インディケーターを描画するために、見事なSVG.jsライブラリーを使用しました。これにより、JavaScriptでSVGグラフィックスを描画できます。さらに、描画するだけでなく、グラフィックプリミティブを操作したり、アニメーションを作成したり、グラフィックエレメントでイベントハンドラーをハングさせることもできます。確かに、最後の機会は使用しませんでした。

これはインジケーターを描く関数です

 function() { var size = 32, bucket_capacity = this.maxUsedSpace, space_occupied = this.userUsedSpace + this.userUsedSpaceDelta + this.userUsedSpacePending; //bucket coords var bx1 = 2, bx2 = 5, bx3 = size - bx2, bx4 = size - bx1, by1 = 2, by2 = size - by1, by3 = by2, by4 = by1, tg_alpha = (bx2 - bx1) / (by2 - by1); //calculate areas var barea = Math.abs(bx1*by2 + bx2*by3 + bx3*by4 + bx4*by1 - bx2*by1 - bx3*by2 - bx4*by3 - bx1*by4) / 2, sarea = Math.min(1.0, space_occupied / bucket_capacity) * barea; //calculate y of the occupied space (see sizeIndicator.jpg for details) var a = -2*tg_alpha, b = 3*tg_alpha*by2 + bx3 + size - 3*bx2 + tg_alpha*by3, c = bx2*by2 - tg_alpha*Math.pow(by2, 2) + 2*bx2*by3 - bx3*by2 - size*by3 - tg_alpha*by2*by3 + 2*sarea, D = Math.pow(b, 2) - 4*a*c, y = (-b + Math.sqrt(D)) / (2*a); //occupied space coords var sx1 = Math.ceil(bx2 - by2*tg_alpha + y*tg_alpha), sx2 = bx2, sx3 = bx3, sx4 = size - sx1, sy1 = Math.ceil(y)-2, sy2 = by2, sy3 = by3, sy4 = sy1; //draw if(!this.sizeIndicator){ this.sizeIndicator = SVG('sizeIndicator'); this.sizeIndicator.space = this.sizeIndicator .polygon([sx1,sy1, sx2,sy2, sx3,sy3, sx4,sy4]) //occupied space .fill('#DD6600'); this.sizeIndicator.bucket = this.sizeIndicator .polyline([bx1,by1, bx2,by2, bx3,by3, bx4,by4]).fill('none') //bucket shape .stroke({ color: '#fff', width: 3, linecap: 'round', linejoin: 'round' }); } else { this.sizeIndicator.space .animate(2000) .plot([sx1,sy1, sx2,sy2, sx3,sy3, sx4,sy4]); } //update tooltip $('#sizeIndicator').attr('title', g.abUtils.GetSize(space_occupied) + ' / ' + g.abUtils.GetSize(bucket_capacity)); }

モバイル版について

別のモバイルアプリケーションを作成する予定はありません。モバイルアプリケーションを追加でインストールする必要があるため、ユーザーはあまり好きではありません。そのため、実際には、別のアプリケーションを作成する必要があるため、プロジェクトのサポートと開発が複雑になります。代わりに、プログレッシブWebアプリケーション（Progressive Web AppまたはPWA）のパスをたどっていきます。しかし、現時点では、AB-DOCはそうではありません。これまでのところ、モバイルブラウザーからアプリケーションの作業をできる限り完全かつ便利にしようとしています。

画面幅が600ピクセル未満のモバイルデバイスでは、アプリケーションの動作が多少異なります。このようなデバイスでは、ツリーまたはドキュメントの2つのモードのいずれかでのみ機能します。一般に、ツリーノードのドラッグアンドドロップやドキュメントへのファイルの添付など、タッチデバイスの機能を完全に維持することができました。

ただし、アプリケーションでは、インターネットに接続せずにドキュメントを操作することはできません。これは、PWAの作成時に実装される重要な機能です。

モバイルデバイスでのアプリケーションの適応に取り組んでいるときに直面した困難の1つは、便利なテストツールの欠如です。

開発者のローカルマシンで実行されているアプリケーションをモバイルデバイスから開くことは難しくありません。 Wi-Fi経由でローカルアドレスにアクセスできます。このためのドメインを作成し、それを外部IPに転送して、ポートをルーターのローカルマシンに転送できます。そして、このドメインはローカルマシンのアプリケーションアドレスになります。

ルーターの設定に入る方法がない場合は、USBアダプター経由でWi-Fiを使用するオプションがまだあります。 IgorBBによって発明されました。このオプションの詳細については、AB-DOCツリーhttps://ab-doc.com/eu-west-1_a01c087d-a71d-401c-a599-0b8bbacd99e5/d4b68bc3-2f32-4a3a-a57c-15cb697e8ef3をご覧ください。

テストの主な問題は、モバイルブラウザーに開発者コンソールがないことです。 alert（）を介してデバッグ情報を出力していますが、これはもちろん良い選択肢ではありません。しかし、まだ適切な方法を実装していません。

開発と展開

プロジェクトに取り組んでいるのは2人だけであるため、開発プロセスは非常に簡単です。 BitBucketでgitとプライベートリポジトリを使用します。マスターブランチは製品コードです。それからのみデプロイします。私たちはすべての機能/エラーを別々のブランチで処理します。各ブランチには、独自のタスクトラッカーAB-TASKSに個別のタスクがあります。ブランチは、できるだけ頻繁にマスターとマージしてデプロイしようとします。

展開プロセスでは、アプリケーションコードをS3バケットにロードする必要があります。ここにはいくつかのニュアンスがあります。

上記で書いたように、CloudFrontを使用してコンテンツを配信します。コンテンツがほとんど常にCloudFrontキャッシュから配信されるメカニズムを提供する必要がありますが、ファイルの更新バージョン（picture、css、js、htmlまたはその他のファイル）をダウンロードすると、CloudFrontはキャッシュ内のファイルを更新する必要があります。そうしないと、ユーザーがキャッシュからファイルの一部を受け取ったり、ソースから更新されたファイルを受け取ったりするという不快な状況が発生する可能性があります（S3）。これは予測不可能な結果につながる可能性があります。

アプリケーションコードを返すには、AB-DOCソースコードを含むS3バケットの形式の1つのソースと、2つのキャッシュルール（キャッシュの動作）を備えた個別のCloudFrontディストリビューションを使用します。

キャッシュルールは、CloudFrontがファイルをキャッシュする方法を定義します。ルールを構成するには、要求パターン（* .htmlまたはimages / *。Jpgなど）と、要求が指定されたパターンと一致したときに適用される設定が設定されます。設定には、キャッシングがアクティブなHTTPメソッド、TTLパラメーターまたはキャッシュ内のオブジェクトの存続期間（最小、最大、デフォルト）、圧縮、および実際にキャッシングが実行される基準（パラメーターが考慮されるかどうか、Cookie ...）、およびその他の多くが含まれますパラメータ。

2つのキャッシュルールを構成しました。

最初のルールはHTMLファイル用です。キャッシュ設定では、小さいTTLが設定されています（最小TTL = 100秒）。これらのファイルにcache-control max-age = 0を設定すると、最小TTLが適用されます。つまり、HTMLファイルは100秒後に期限切れと見なされ、CloudFrontはソースを呼び出して、ファイルの最新バージョンがそこに表示されるかどうかを確認します。
他のすべてのファイルの2番目のルール。これらのファイルでは、cache-control max-ageファイルのヘッダーを設定しないため、最小TTLとデフォルトTTLの2つの最大値が使用されます。私たちの場合、これは86400秒または24時間です。つまり、長い時間キャッシュされます。ただし、これに加えて、ルール設定では、オブジェクトをキャッシュするときにCloudFrontがリクエストパラメーターを「見る」ことを示しています。

これは、 AWSのドキュメントで、さまざまなTTLとキャッシュ制御設定がどのように組み合わされるかを説明している場所です。

クエリパラメータを使用すると、キャッシュを簡単に管理できます。すべてのファイルについて、パラメータとしてファイルの条件付きバージョンを追加します： filename.extension？V = 123 。ファイルが変更されている場合、パラメーター値を変更するだけで、CloudFrontはキャッシュからではなくソースにファイルを返します。

ただし、ファイルの変更を追跡し、それらへのリンクを手動で更新するのは非常に面倒であり、概して不可能です。私たちはそれをすることを常に忘れていました。そのため、これを自動的に行うbashスクリプトを作成しました。同時に、S3でのアプリケーションコードの本格的な展開のために多くの機能を実行します。

彼が実行する手順は次のとおりです。

すべてのHTMLファイルをスキャンします。 grepを使用すると、図面、スタイル、スクリプトへのすべてのリンクが検索されます。 statコマンドを使用して、各ファイルの最後の変更のタイムスタンプを確認しますスクリプトの最後のパス以降にファイルが変更されている場合、 sedを使用して、ファイルへのリンクのパラメーターv = [timestamp]のタイムスタンプを更新します。
スクリプト構成では、どのJavaScriptファイルを1つのバンドルにアセンブルするかを彼に伝えることができます。 , babel . .

S3 HTML , :

 aws s3 sync $PACKAGE s3://"$bucket"/ --delete --acl public-read --exclude "*.html" aws s3 sync $PACKAGE s3://"$bucket"/ --delete --acl public-read --cache-control max-age=0 --exclude "*" --include "*.html"

 #! /bin/bash # This script is used for deployment # It uploads files to the bucket, corrects timestamps of files included in HTML, bundles js scripts. # To use this script you need a config file: # .service/deploy.config : # bucket=mybucket # exclude=.git/*,.service/*,secret_file # Files and directories to exclude from uploading # bundle=script1.js,script2.js,script3.js # Scripts listed here would be removed from HTML files and bundeled into a single file, which will be minified. A separate bundle is created for every HTML file # You also need to install babel-cli and babel-preset-minify from npm: # npm install --save-dev babel-cli # npm install --save-dev babel-preset-minify # If you want this script to correct timestamps in HTML, you should include them with a ?v=<number> : <link rel="apple-touch-icon" sizes="180x180" href="/apple.png?ver=v123"> # You can use following options: # -v,--verbose - for detailed output # -n,--no-upload - do not upload result into bucket VERBOSE=false NO_UPLOAD=false PACKAGE="package" TMP="$PACKAGE/.temp" CONFIG=".service/deploy.config" PATH="$PATH:./node_modules/.bin" function log() { local message=$1 if [ "$VERBOSE" = true ] ; then echo $message fi } function error() { echo "$1" } bundle_n=0 function create_bundle() { local html_source_file=$1 echo "Creating bundle for \"$html_source_file\"..." #this is a grep command local grep0="$BUNDLE_GREP $html_source_file" #name before babel local bundle_before_babel="$TMP/ab.doc.bundle$bundle_n.js" #name to be used in html local bundle_after_babel_src="scripts/ab.doc.bundle$bundle_n.min.js" #name after babel local bundle_after_babel="$PACKAGE/$bundle_after_babel_src" $grep0 | while read -rx; do log "Adding \"$x\" to bundle" echo -en "//$x\n" >> $bundle_before_babel cat $x >> $bundle_before_babel echo -en "\n" >> $bundle_before_babel done # if files for bundling were found in html if [ -f $bundle_before_babel ] then #putting bundle through babel log "\"$bundle_before_babel\" >===(babel)===> \"$bundle_after_babel\"" npx --no-install babel "$bundle_before_babel" --out-file "$bundle_after_babel" --presets=minify #removing bundeled scripts from file log "Removing old scripts from \"$html_source_file\"..." sed="sed -i.bak -e \"" grep1="$BUNDLE_GREP -n $html_source_file" lines=($($grep1 | cut -f1 -d:)) for ln in ${lines[*]} do sed="$sed$ln d;" done sed="$sed\" $html_source_file" eval $sed #adding bundle instead of old scripts log "Adding bundle to \"$html_source_file\"..." current_time=$(stat -c %Y .$filename) sed -i.bak -e "${lines[0]}i<script src=\"/$bundle_after_babel_src?ver=v$current_time\"></script>" $html_source_file rm $html_source_file.bak bundle_n=$(expr $bundle_n + 1) fi } function update_versions() { local html_source_file=$1 local found=0 local modified=0 #set file versions according to modify timestamp echo "Updating file versions in \"$html_source_file\"..." grep -oE "\"[^\"]+\?ver=v[^\"]+\"" $html_source_file | while read -r href ; do ((found++)) local href="${href//\"/}" local current_timestamp=$(echo $href | grep -oE "[0-9]+$") local filename="${href/?ver=v[0-9]*/}" local new_timestamp=$(stat -c %Y $PACKAGE$filename) log $new_timestamp if [ "$current_timestamp" != "$new_timestamp" ] then ((modified++)) sed -i "s|$filename?ver=v[0-9]*|$filename?ver=v$new_timestamp|g" $html_source_file fi log "Found $found, modified $modified" done } function init_directory() { local path=$1 log "Creating empty directory \"$path\"" if [ -d "$path" ]; then log "\"$path\" already exists. Removing \"$path\"" rm -rf "$path" fi mkdir "$path" } echo "==== Initialization ====" # check flags while [[ $# -gt 0 ]] do key="$1" case $key in -v|--verbose) VERBOSE=true shift ;; -n|--no-upload) NO_UPLOAD=true shift ;; *) shift ;; esac done if [ ! -f $CONFIG ]; then error "Could not load config \"$CONFIG\"." exit -1 fi . $CONFIG exclude=${exclude//,/ } if ! npm list babel-preset-minify > /dev/null ; then error "babel-preset-minify is not installed" exit -2 fi if ! npm list babel-cli > /dev/null ; then error "babel-cli is not installed" exit -3 fi if [ -v bundle ]; then log "Using bundle" bundle=${bundle//,/ } BUNDLE_GREP="grep " for b in $bundle do BUNDLE_GREP="$BUNDLE_GREP -o -e $b " done else log "Not using bundle" fi # create package and tmp directories echo "==== Creating temporary directories ====" init_directory "$PACKAGE" init_directory "$TMP" # copying everything into package excluding files listed in $exclude copy="tar -c --exclude \"$PACKAGE\" " files_to_exclude="$exclude $bundle" #( "${exclude[@]}" "${bundle[@]}" ) for e in $files_to_exclude do log "Excluding $e" copy="$copy --exclude \"$e\"" done copy="$copy . | tar -x -C $PACKAGE" eval $copy echo "==== Working with HTML files ====" for f in $(find $PACKAGE -name '*.html') do if [ -v bundle ]; then create_bundle $f fi update_versions $f done rm -rf $TMP if [ "$NO_UPLOAD" = false ] ; then echo "==== S3 upload ====" #upload to S3 aws s3 sync $PACKAGE s3://"$bucket"/ --delete --acl public-read --exclude "*.html" aws s3 sync $PACKAGE s3://"$bucket"/ --delete --acl public-read --cache-control max-age=0 --exclude "*" --include "*.html" fi echo "==== Cleaning up ====" rm -rf $PACKAGE exit 0

どうやってAB-DOCをしますか