以前に書かれた単語は 0 件あります
同社の最近のサーバーレスへの移行は、いくつかの内部 CMS といくつかの外部 Web サイトを AWS に配置することです。まず、サーバーレス Web サイト構築のための S3 (vue) + API Gateway + lambda の小さな例を簡単に実装します。
一般的なWebサイト、特にスタートアップ企業ではEC2を導入する必要はあまりないと感じますが、最初は利用者が少ないので、アクセス数に応じて課金するのが良いのではないでしょうか？Lambda には毎月数万回の無料アクセスもあり、実際にコストを節約できます。
高可用性、動的拡張、セキュリティなどにもさまざまな種類がありますが、特に考慮する必要はなく、コーダーを見つけて直接作業を開始し、ビジネス プロセスがスムーズに実行されるまで待ちます。さっそく始めましょう
1.1 S3（Vue）の設定
1.1 S3バケットの作成と設定
#1 S3バケットを作成し、静的Webサイトホスティング機能を有効にする #2 インデックスドキュメント名をindex.htmlに設定する
1.2 簡単な Vue ページを作成する
<!--APP.vue-->
<template>
<div id="app">
<img src="./assets/logo.png">
<h3><router-link to="/changeComponent">テストvue router</router-link></h3>
<router-view/>
</div>
</template>
<script>
デフォルトのエクスポート {
name: 'App'
}
</script>
<style>
#app {
フォントファミリー: 'Avenir'、Helvetica、Arial、サンセリフ;
-webkit-font-smoothing: アンチエイリアス;
-moz-osx-font-smoothing: グレースケール;
テキスト整列: 中央;
色: #2c3e50;
マージントップ: 60ピクセル;
</style>
<
テンプレート
> <div>
!--ChangeComponent--
<h1>ラムダから文字列を取得するテスト</h1>
<button @click='getLamda'>ラムダ</button>
<h2>{
{msg}}</h2>
</div>
</template>
<script>
import axios from 'axios'
エクスポート デフォルト {
name
: 'ChangeComponent',
data () {
return {
msg: 'ボタンをクリックするとラムダが返されます'
}
}、
メソッド: {
getLamda(){
axios.get('https: //哈哈这个要先建好APIGateWay才会有哦/default/demo4lambda').then(response
=> {
console.log(response.data)
this.msg=response.
},
error => {
console.log('error')
}
)
}
}
}
</script>
<!--HelloWorld-->
<template>
<div class="hello">
<h1>{
{ msg }}</ h1>
<h2>重要なリンク</h2>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Vue.js アプリへようこそ'
}
},
}
</script>
<
!-- 「scoped」属性を追加して、CSS をこのコンポーネントのみに制限します -->
<stylescoped>-- 「scoped」属性を追加して、CSS をこのコンポーネントのみに制限します -->
h1, h2 {
font-weight:normal;
}
ul {
リストスタイルタイプ: なし;
パディング: 0;
}
li {
表示: インラインブロック;
マージン: 0 10px;
}
a {
色: #42b983;
}
</style>
<
!--index.js-->
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import ChangeComponent from '@/components/ChangeComponent'
Vue.use(Router)
エクスポート
デフォルト new Router({
ルート: [
{
パス: '/',
名前: 'HelloWorld',
コンポーネント: HelloWorld
},
パス: '/changeComponent'、
名前: 'ChangeComponent'、
コンポーネント: ChangeComponent
}
]
}
)
1.3 Vue ページを S3 にアップロードする
1.4 S3 共有アクセスを許可する
1.5 S3 ページアクセスのホワイトリストを設定する
{
"バージョン": "2012-10-17",
"Id": "Policy1618sfdsa313fd336",
"ステートメント": [
{
"Sid": "Stmt16ssss1112
"プリンシパル": "*",
"アクション": "s3:*" ,
"リソース": "arn:aws-cn:s3:::demo4lambda/*",
"条件": {
"NotIpAddress": {
"aws:SourceIp": "123.456.789.10/32"
},
"Bool": {
"aws:SecureTransport":"偽"
}
}
}
]
}
1.2 APIゲートウェイの作成
# 1 REST API を作成します
# 2 統合タイプとしてラムダ関数を選択します
# 3 コンテンツタイプを設定し、ヘッダーにクロスサイト権限を追加します
1.3 ラムダの作成
1.3.1 ラムダの作成
# 実行時にNode.jsを選択する
1.3.2 ラムダを作成してデプロイする
1.4 テスト
Web サイトにアクセスすると、ページジャンプが行われ、lambda を呼び出してデータを返すことができます。
1.5 フォローアップ
1.5.1 ドメイン名の問題
現在使用しているドメイン名はs3のドメイン名ですが、今後はcloudfrontを利用してドメイン名を設定する必要があり、独自のドメイン名にlambdaをバインドすることでAPIゲートウェイのクロスサイト設定を解除することができます。
1.5.2 DBの問題
Lambda は DB にアクセスする必要があり、後で DB 設定を追加する必要があるため、VPC ネットワークに Lambda を追加する必要があります。
1.5.3 セキュリティの問題
セキュリティの問題では、AWF と SecurityGroup を使用してファイアウォール構成を実装します