コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > ExpressおよびMongodbを使用したサーバーレス展開のガイド

ExpressおよびMongodbを使用したサーバーレス展開のガイド

Lisa Kudrow
リリース： 2025-02-10 12:47:09
オリジナル
1008 人が閲覧しました

A Guide to Serverless Deployment with Express and MongoDB

このチュートリアルでは、私の希望するデータベース駆動型のWebアプリケーション展開ワークフローを示します。これは、複雑なマルチサービスインフラストラクチャを設定および維持することなく、個々のプロジェクトでフルスタック開発を達成したい開発者向けです。

node.jsとExpressで記述された非常に基本的なWebアプリケーションを展開します。訪問者はメモを書いて保存したり、以前に書かれたメモを読むことができます。データはMongoDBデータベースに保存されます。 Githubアクションを使用して、CI https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712cdワークフローを作成して、アプリケーションをAWSラムダに展開します。

焦点は、シンプルさ、実用性、コスト削減にあります。 AWSとMongodbには非常に寛大なフリーティアがあるため、無料で学ぶことができます。ただし、最終的に数セントを支払いたくない場合は、後でアプリケーションを検討してください。アプリは公開されるため、長期的には自由層を理論的に上回る可能性があります。ただし、このアプリ拡張機能を独自の目的で使用することを計画している場合は、適度に交換されたWebサイトでは非常に手頃な価格であるため、このセットアップをお勧めします。

このチュートリアルのすべてのコードをGitHubアカウントで見つけることができます。

キーポイント
    AWS LambdaおよびMongodb Atlasによるサーバーレスの展開と、費用対効果の高いスケーラビリティと単純化されたサーバー管理。
  • 継続的な統合と展開のためにGitHubアクションを使用し、ExpressアプリケーションをAWS Lambdaに自動的に更新および展開します。
  • オブジェクトモデリングにMongooseを使用し、MongoDBにアプリケーションデータを保存し、サーバーレス環境でデータベース接続を効率的に管理します。
  • ユーザー認証とIPアドレスのホワイトリストを設定することにより、MongoDB Atlasインスタンスを保護しますが、機密データについては、より安全なオプションを検討してください。
  • AWS APIゲートウェイを統合して、アプリケーションのアクセスと管理性を強化し、パブリックURLと潜在的なカスタムドメイン構成を可能にします。
  • Mongodbとnode.jsのローカル開発セットアップにDockerを使用して、エクスプレスアプリケーションを構築およびテストするための強力な環境を確保します。

    前提条件アプリケーションを構築するには、いくつかのものが必要です。システムにノードとDockerがインストールされていることを確認してください。ノードをインストールするには、ノードバージョンマネージャー（NVM）を使用できます（こちらの指示を参照）。 Dockerについては、オペレーティングシステム用のDockerデスクトップの最新バージョンをインストールしてください。

    Dockerを使用して、マシンでMongoDBインスタンスを実行することに注意してください。または、MongoDB Community Editionを手動でインストールすることもできます。ここでいくつかの指示を見つけることができます。

    Github、Mongodb、およびAmazon Web Services（AWS）にアカウントも必要です。 AWSに登録するときは、クレジットカード番号を入力する必要があります。上記のように、このチュートリアルの手順に従って、無料層を超えません。

    ノードとエクスプレスに関するいくつかの準備知識が役立つ場合があります。

    ローカル開発

    わかりました、始めましょう。まず、新しいpackage.jsonファイルを備えた空のフォルダーが必要です。 npm initを実行する場合は、作成できます。

    次の依存関係をインストールする必要があります クライアントからのHTTPリクエストに応答するために使用される

      express
    1. MongoDBデータベースと通信するために使用される mongoose
    2. aws-server-express、aws lambdaが私たちのアプリケーションを呼び出すことができる
    4. 次のコマンドを実行してインストールします

      npmインストール-Save Express Mongoose Aws-Server-express && npmインストール - save-dev concurly

      <code class="language-bash"> 1
<https:> MongoDBデータベースを使用してデータを保存するため、ローカルマシンでデータベースインスタンスを実行することは開発に役立ちます。これは、最新の<https:>mongo <h3> docker画像を使用する場所です。 Dockerがマシンにインストールされている場合は、ターミナルにDocker Run Mongoを入力してください。画像はDockerHubから抽出され、新しいコンテナで起動されます。 Dockerに精通していない場合、それは問題ではありません。 MongoDBインスタンスがコンピューターで実行されており、通信できることを知る必要があります。 <https:>
<p>アプリケーションがデータベースと通信するためには、接続を初期化する必要があります。これをmongoose.jsという新しいファイルで行います。mongoose
<https:><pre class="brush:php;toolbar:false">https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e5e4e4ede557fd83712 mong

const mongoose = require（ "mongoose"）;

const uri = process.env.mongodb_url;

接続しましょう。
const connect = async（）=＆gt; {
  試す {
    connection = await mongoose.createconnection（uri、{
      usenewurlparser：true、
      usefindandModify：false、
      useunifidtopology：true、
      buffercommands：false、https：//www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e5e4ede557fd83712 disable disable disable disable
      Buffermaxentries：0、https：//www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e5e2be4ede557fd83712 drightde557fd83712
    }）;
    接続を返します。
  } catch（e）{
    console.error（ "mongodbに接続できませんでした..."）;
    eを投げる;
  }
};

関数getConnection（）{
  接続を返します。
}

module.exports = {connect、getConnection}; <code class="language-javascript"><https:>
<https:>此文件导出一个包含两个函数的对象。Connect（）创建一个到我们环境变量中指定位置的mongodb的连接。该连接存储在一个名为接続的变量中。getConnection（）只是返回接続变量。您可能想知道为什么我们不直接返回接続变量本身。这是因为node.js、我们使用一个函数从我们的mongoose.js模块中提取最新的接続<p>
<https:>现在我们的应用程序能够连接到数据库、我们也希望在其中存储数据 - 更具体地说、是我们可以在用户界面中编写的笔记。因此、我们将为我们的笔记创建一个数据模型models文件夹内名为notes.js：<p>
<https:><pre class="brush:php;toolbar:false">https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e5e4ede55712ppsppde55712 cn/link/29a9f8c8460e5e2be4edde557fd83712notes.js

const mongoose = require（ "mongoose"）;
const {getConnection} = require（ "..https：//www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712mongoose"）;
const conn = getConnection（）;
const schema = mongoose.schema;

module.exports = conn.model（
  "注記"、
  new Schema（{text：{type：string、必須：true}}）
）; <code class="language-javascript"><https:>
<https:>在这里、我们从mongoose.js、并在其上注册一个名为、并在其上注册一个名为note的模型。它有一个非常基本的模式、只包含一个名为text的必需属性、类型为文字列。このモデルを使用して、データベースに保存されているドキュメントを作成できます。 <https:>
<h3> 2
<https:>次に、簡単な高速アプリケーションを作成します。 Project Root Directoryにapp.jsという名前のファイルを作成します。它具有以下内容：<https:>
<pre class="brush:php;toolbar:false"><code class="language-javascript">https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e5e4ede557fd83712

const express = require（ "Express"）;

const app = express（）;

app.use（express.urlencoded（{extended：false}））;

app.get（ "https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712"、async（req、res）=＆gt; {
  試す {
    const note = require（ ".https：//www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712modelshttps：//www.php.cn/link/29a9f8c8460e5e2bbe4edde5712note"
    const notes = await note.find（{}）;
    RESTRES.STATUS（200）.SEND（
      `
      <style>
          html {
              テキストアライグ：センター;
              バックグラウンドカラー：＃93C5FD;
              フォントファミリー：「セゴーウイ」、タホマ、ジュネーブ、ヴェルダナ、sans-serif;
              色：白;
              フォントサイズ：2REM;
          }

          Textarea {
              サイズのサイズ：なし;
              国境：2pxソリッド＃9CA3AF;
              ボーダーラジウス：4px;
              バックグラウンドカラー：＃f3f4f6;
              パディング：0.5rem;
              幅：90％;
          }

          ボタン {
              パディング左：2REM;
              パディング右：2REM;
              パディングトップ：7px;
              パディングボトム：7px;
              バックグラウンドカラー：＃f3f4f6;
              国境：2pxソリッド＃9CA3AF;
              色：＃4b5563;
              ボーダーラジウス：4px;
          }

          p {
              国境圏：2pxソリッド;
              パディング：1REM;
              テキストアライグ：左;
          }
      <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712style>
      <form method="POST">
          <textarea name="text"> <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712textarea><br>
          <button type="submit"> save<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712button>
      <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712form>
      <h1>私のメモ<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h1>
      $ {notes.map（（n）=＆gt; `<p>$ {n.text}<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>`）.jein（ ""）}
      `
    ）;
  } catch（e）{
    RES.SEND（e）を返します。
  }
}）;

app.post（ "https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712"、async（req、res）=＆gt; {
  試す {
    const note = require（ ".https：//www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712modelshttps：//www.php.cn/link/29a9f8c8460e5e2bbe4edde5712note"
    const note = new note（req.body）;
    note.save（）;
    RETURN RES.SEND（ "note saved。<a href='https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712'>refresh<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712a>"）;
  } catch（e）{
    RES.SEND（e）を返します。
  }
}）;

module.exports = app; <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
私が言ったように、アプリは非常に失礼で、デモンストレーションとしてのみ使用されます。まず、Expressアプリケーションを起動します。次に、組み込みのUrlencoded Middlewareを使用して、送信されたフォームデータを使用できるように、着信要求本体を解析するように指示します。アプリケーションには、アプリケーションルートディレクトリのリクエストを処理する2つの方法があります。
<p>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<ul>app.get（ "https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712"、...）http get requestsを処理します。ユーザーがページをロードすると、呼び出されます。メモを入力して保存できる簡単なページを表示したいと思います。さらに、以前に書かれたメモも表示したいと考えています。リクエストハンドラーのコールバック関数では、メモモデルが必要です。モデルは、現在のデータベース接続が必要であるため、POSTリクエストハンドラーのコールバック関数内で必要とする必要があります。App.jsファイルが初めてロードされたときに接続が存在しない場合があります。次に、データベース内のすべてのメモを受信するためのFINDメソッドを適用します。この方法は約束を返します。だから私たちはそれが解析されるのを待ちます。最後になりましたが、応答オブジェクト（RES）の送信方法を使用して、文字列をクライアントに送り返します。この文字列には、ブラウザが実際のHTML要素としてレンダリングするHTML構文が含まれています。データベースの各メモについて、テキストを含む段落要素を追加するだけです。 <li>
<p>これは、この非常に謙虚な例を素敵なユーザーインターフェイスに変換できる場所です。クライアントに送信するものを自由に選択できます。たとえば、これは完全にバンドルされたクライアントReactアプリケーションになる可能性があります。また、ハンドルバーなどのExpress Viewエンジンを使用して、サーバー側のレンダリング方法を選択することもできます。それが何であるかによって、アプリケーションにルートを追加し、JSパッケージなどの静的ファイルを提供する必要がある場合があります。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>app.post（ "https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712"、...）httpの投稿リクエストを処理します。ユーザーがメモを保存すると、呼び出されます。繰り返しますが、最初にメモモデルが必要です。リクエストペイロードは、リクエストオブジェクト（REQ）のボディ属性を介してアクセスできます。ユーザーがサビされたテキストが含まれています。それを使用して、新しいドキュメントを作成し、Mongooseが提供する保存方法を使用して保存します。繰り返しになりますが、この非同期操作が完了するのを待ってから、ユーザーに通知し、ページを更新する可能性を与えます。 <li>
<p>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li>アプリケーションが実際にHTTPリクエストのリスニングを開始するには、Expressが提供するリスニング方法を呼び出す必要があります。これを別のファイルで行いますdev.jsはプロジェクトルートディレクトリに追加されました：<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"><code class="language-javascript">https://www.php.cn/link/29a9f8c8460e5e2be4ede557fd83712https://www.cn/link/29a9f8c8460e5e5e5e2be4ededde5712：： ：：：： ：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：:：：：：：：：：：：：：：：：：：:：：：：：：：：：：：：：：：：：：：：：：::：：：：：：：：：：：：：：：：::：：：：：：：：：：：：：：::：：：：：：：：：：：：：：::：：：：：：：：：：：::：：：：：：：：：：：：::：：：：：：：：::：：：：：：：：：：：：：：：：：：：::：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：:づ 火::：：： ：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：:：：：：：：：：：：：：：：：：：:：：：：：：：：：：：：：：：：：：：：：：::：：：：：：：：：：：：：：：：::：：：：：：：：：：：：：：::：：：：：：：：：：：：：：::：：：：：：：：：：：::：：：：：：：：：：：：::：：：：：：：：::：：：：：：：：：：：：：：：：：：：::：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：:づ 火::：：： ：：：：：：：：：：：

const app = require（ ".https：//www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712app"）;
const {connect} = require（ ".https：//www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712mongoose"）;

接続する（）;

const port = 4000;

app.listen（port、（）=＆gt; {
  console.log（ `port $ {port}`）で聞くアプリ
}）; <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p>ここでは、mongoose.jsファイルのconnect関数を呼び出します。これにより、データベース接続が開始されます。最後になりましたが、ポート4000でHTTPリクエストを聞き始めます。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
2つの個別のコマンドでMongo Docker画像を開始すると、アプリケーションは少し面倒です。したがって、いくつかのスクリプトをpackage.jsonファイルに追加します：<p>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p><pre class="brush:php;toolbar:false">「スクリプト」：{
  「スタート」：「同時に 'npm：mongodb' 'npm：dev' "、
  "dev"： "mongodb_url = mongodb：https：//www.php.cn/link/29a9f8c8460e5e2bbe4edde557fd83712https：//www.php.cn/link/29af88460e57pde2be4epdde2be4e2.295557 ：27017 node dev.js "、
  「Mongodb」：「Docker Run -P 27017：27017 Mongo」
} <code class="language-json"><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>MongodbはMongoDBインスタンスを起動し、コンテナポート27017をローカルマシンのポート27017にマップします。 Devはアプリケーションを起動し、Mongoose.jsファイルにロードされた環境変数mongodb_urlを設定して、データベースと通信します。開始スクリプトは、両方のスクリプトを並行して実行します。これで、アプリケーションを開始するには、端末でNPMスタートを実行する必要があります。 <p>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>http：https：//www.php.cn/link/link/29a9f8c8460e5e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c840e5e2bbe4ed4ede55 in your your bloce4ededde55 in www.php.cn/link/29a9Fアプリケーションをロードする4000。<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> <img src="https:https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712img.php.cnhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712uploadhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712articlehttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712000https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712000https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712000https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712173916284121297.jpg" alt="A Guide to Serverless Deployment with Express and MongoDB " https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h2><strong>展開<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712strong><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h2>
<p>アプリケーションを展開する時が来ました。 AWS、Mongodb Atlas、およびAWS APIゲートウェイでLambda機能を使用します。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3> 1ラムダ機能とは何ですか？なぜそれらを使用するのですか？ <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p> lambda関数は、サーバーを維持せずにHTTP要求に応じてコードを実行する方法です。彼らはオンデマンドでのみ実行されます。つまり、誰もあなたのサービスに電話をかけない場合、サーバー時間に支払う必要はありません。一方、多くの人があなたのサービスを呼び出すと、AWSは自動的にスケーリングされ、より多くのLambdaインスタンスを起動します。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
名前が示すように、Lambda関数はあなたが望むものを何でも記入できる関数です。例外は1つだけです。ラムダインスタンスが実行されなくなると閉じられるため、コードはステートフルではないはずです。 <p>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>アプリケーション全体をLambda関数に包み、AWS Lambdaに展開します。 AWS Lambdaには、1か月あたり100万の無料リクエストと400,000 GB秒を含む非常に寛大で無制限の無料層があります！したがって、サービスを安全に実験し、それを支払うことなく複数のLambda関数を展開できます。それらをもう使用したくない場合は、これらの機能を削除してください。 <p>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> 2
<h3>さあ、AWS管理コンソールにログインして、AWS Lambdaに移動します。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>関数<p>セクションの下で、[<em>]をクリックして関数を作成します。この前に、サービスを展開するために地域を指定したことが重要です。デスクトップコンピューターでは、管理コンソールの右上隅にある領域を選択できます。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>
<em><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>を選択して<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>を作成し、関数に名前を付けます。私はそれを<em> express-lambda-example<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>と名付けました。 <em>runtime<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>の下で、<select<em>node.js 12x<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>を選択し、関数を作成します。以下に示すように、ウィンドウが表示されます：<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> <img src="https:https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712img.php.cnhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712uploadhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712articlehttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712000https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712000https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712000https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712173916284443353.jpg" alt="A Guide to Serverless Deployment with Express and MongoDB " https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>私たちのLambda関数には、いくつかのテストコードがすでに含まれています。後で上書きするので、これを無視できます。ページを下にスクロールすると、<em>環境変数<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>というセクションが表示されます。以前のローカル開発スクリプトで、mongodb_urlと呼ばれる変数を定義したことを覚えていますか？ Lambdaインスタンスがデータベースと通信できるように、ここで同じ変数を作成する必要があります。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
ただし、データベースはまだ実行されていません。この目的のためにローカルマシンを使用したくありません。そのため、Mongodb Atlas Free Tierクラスターを作成します。 <p>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> 3
<h3>無料のティアクラスターを作成するには、mongodb.comでアカウントを作成します。登録プロセス中に、クラスタータイプを選択するように求められます。無料の共有クラスターを選択してください<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>。次のステップは、プロジェクトに名前を付けることです。さらに、お気に入りのプログラミング言語を選択できます。 <p>
<em>次のステップでは、クラウドプロバイダーと地域を選択できます。 node.jsアプリケーションには既にAWSを使用しているため、選択することをお勧めします。可能であれば、AWSで選択したのと同じ領域を選択します。次のセクションでは、使用するレベルを決定できます。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>m0サンドボックス<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>レベルを選択します。 Mongodbは、この階層を生産環境で使用することをお勧めしませんが、初心者には必要なものすべてを提供します。<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> <img src="https:https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712img.php.cnhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712uploadhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712articlehttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712000https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712000https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712000https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712173916284592009.jpg" alt="A Guide to Serverless Deployment with Express and MongoDB " https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>数分後、クラスターの使用準備が整います。今欠けているのはそれへのアクセスです。 [メニュー]に<em>をクリックして、<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>にアクセスし、新しいユーザーを作成します。認証方法は<em>パスワード<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>です。ユーザーが許可を読み書きすることを許可します。これが完了したら、データベースにアクセスできるIPアドレスをホワイトリストに登録する必要があります。これを<em>ネットワークアクセス<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>セクションで行うことができます。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>残念ながら、クラスターに接続しようとする各ラムダインスタンスのIPがわかりません。したがって、0.0.0.0 https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd837120を追加して、IPアドレスをホワイトリストに登録します。機密データがあり、高レベルのデータ保護を確保する場合は、これは推奨されないことに注意してください。クラスターは、データベースユーザーに提供する資格情報によってのみ保護されています。ピア接続を設定することは、この問題の可能な解決策になります。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>さあ、クラスターに戻り、<em>接続<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>をクリックします。 [ポップアップモード]ウィンドウで、[<em>]をクリックしてアプリケーションを接続します<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>。次に、node.jsバージョン2.2.12以降を選択し、接続文字列をコピーします。 AWSのLambda関数コンソールに戻り、mongodb_urlと呼ばれる新しい環境変数を作成し、その中の接続文字列を貼り付けます。文字列のプレースホルダーをデータベースユーザーの資格情報とデータベースの名前に置き換えてください。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3> 4
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3> AWS Lambdaがアプリケーションを呼び出すためには、dev.jsファイルで行ったものと同様の新しいエントリスクリプトを設定する必要があります。index.jsという名前を付けます。
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p><pre class="brush:php;toolbar:false">https://www.php.cn/link/29a9f8c8460e5e2be4ede557fd83712https://www.cn/link/29a9f8c8460e5e5e4edede557fd83712
const awsServerlessExpress = require（ "aws-server-express"）;
const {connect} = require（ ".https：//www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712mongoose"）;

接続= nullとします。

module.exports.handler = async（event、context）=＆gt;
  context.callbackwaitsforemptyeventloop = false;

  if（connection === null）connection = await connect（）;
  const app = require（ ".https：//www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712app"）;
  const server = awsserverlessexpress.createserver（app）;
  awsserverlessexpress.proxy（サーバー、イベント、コンテキスト、 "Promise"）を返します。
}; <code class="language-javascript"><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>ここでは、AWS-Server-Expressライブラリを使用しています。基本的に、dev.jsのリスニングメソッドと同じ機能を持っています。これにより、アプリケーションはLambda環境でクライアント要求を処理できます。 <p>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>さて、lambda.jsファイルについて注意すべき重要なことが1つあります。 Lambda関数が呼び出されるたびに、ハンドラー関数が実行されます。ハンドラー関数の外側のすべては、ラムダ容器が起動したときに1回開始され、複数のラムダコールの間に持続する可能性があります。これが、MongoDB接続オブジェクトをファイルのグローバル範囲に保存する理由です。ハンドラー機能が実行されるたびに、接続が開始されたかどうかを確認します。その場合、関数は毎回データベースに再接続する代わりに再利用します。これは、多くの実行時間を節約するため、非常に重要です。接続が複数の呼び出しで持続するために、Context.callbackwaitforemptyeventloopをfalseに設定する必要があります。この機能の詳細については、こちらをご覧ください。 <p>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> 5
<h3>次のステップは、CI https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712cd githubアクションを使用したワークフローを作成することです。これは、コード変更をGitHubリポジトリにプッシュするたびに、パイプラインをトリガーすることを意味します。パイプラインは、AWS上のLambda関数の更新を自動的に処理します。 Jakob Lindは、このプロセスを彼の記事「AWS LambdaとGitHubアクションを使用した自動展開をセットアップする方法」でよく説明しています。主な部分を簡単に要約します。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
Githubを設定してワークフローを開始するために、私たちはパスhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712.githubhttps://www.php.cn/link/29af8460e55e55e55e55.phpp. .yml in e2be4edde557fd83712workflowsファイル。它包含以下yaml代码：<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<pre class="brush:php;toolbar:false"><code class="language-yaml">＃https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712.githubhttps://www.php.cn/link/29a9f8c8460e5e2bbe4e4de5712wedppde571ppsedde571ppse /www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712deploy.yml

名前：Lambdaに展開します
の上：
  押す：
    ブランチ：
      - 主要
仕事：
  展開する：
    名前：展開
    戦略：
      マトリックス：
        ノードバージョン：[12.x]
    runs-on：ubuntu-latest
    ステップ：
       - 使用：actionhttps：//www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712checkout@v1
       - 名前：nodejsのセットアップ
        使用：Actionhttps：//www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712setup-node@v1
        と：
          ノードバージョン：$ {{matrix.node-version}}
       - 名前：NPMインストール
        実行：NPM CI -Production
       - 名前：zip
        用途：Montudorhttps：//www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712action-zip@v0.1.1
        と：
          args：zip -qq -r .https：//www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712app.zip .https：//www.php.cn/link/29a9f8460460e5e5e2be4de5574de
       - 名前：ラムダへのプッシュ
        用途：AppleBoyhttps：//www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712lambda-choust@master
        と：
          aws_access_key_id：$ {{secrets.aws_access_key}}}
          AWS_SECRET_ACCESS_KEY：$ {{secrets.aws_secret_key}}}
          AWS_REGION：EU-CENTRAL-1＃请替换为您的WS区域
          function_name：express-lambda-example
          ZIP_FILE：app.zip <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712code><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712pre>
<p>该文件告诉githubアクション在每次推送到存储库的主分支时执行一个名为、deploy的作业。对我来说、将其仅限于主分支非常有用。因此、您可以安全地推送到您的开发分支、而不会将不需要的代码部署。<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>deploy作业只是安装所有必要的库、将整个项目压缩、将整个项目压缩、并将其推送到aws lambda。请注意、yaml的身份和访问管理控制台中创建新用户来生成这些密钥。获得密钥后、您需要将它们另存为github项目设置下的环境变量、位于<em>秘密<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>下。<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>要使您的应用程序在aws lambda上准备好、您需要提交您的代码并将其推送到github <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3> 6。 aws apiゲートウェイ使我们的应用程序可访问<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p>现在我们的应用程序已准备好用于实时环境。但是、我们没有通过ウェブ访问它的方法。这就是我们接下来使用aws apiゲートウェイ所做的。APIゲートウェイには無料層もあります。ただし、このパッケージは12か月に制限されています。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
AWSコンソールで、APIゲートウェイサービスに移動し、[<p>]をクリックして、<em>の作成をクリックし、<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>rest api <em>を選択し、名前を付けて保存します。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>APIゲートウェイをLambda関数に接続するには、HTTP要求をLambda関数に転送する新しい方法を作成します。したがって、<p>操作<em>ドロップダウンメニューで、[<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>]を選択し、[<em>]を作成し、<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>any<em>を選択します。次の画像に示されているように、画面が表示されます。 Lambdaエージェント統合の使用<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em><em>チェックボックスが選択されていることを確認してください。 Lambda関数の名前を入力して保存します。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p> <p><img src="https:https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712img.php.cnhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712uploadhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712articlehttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712000https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712000https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712000https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712173916284649066.jpg" alt="A Guide to Serverless Deployment with Express and MongoDB " https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>次に、Lambda Proxy統合をセットアップする必要があります。これは、基本的に、すべてのクライアントリクエストがLambda関数のようにリダイレクトされる必要があることを意味します。したがって、<p>アクション<em>ドロップダウンメニューに新しいリソースを作成します。ポップアップモードウィンドウで、<proxyリソース<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em> [以下を参照）をチェックして<em>構成を選択し、保存します。<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p> <img src="https:https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712img.php.cnhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712uploadhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712articlehttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712000https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712000https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712000https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712173916284977045.jpg" alt="A Guide to Serverless Deployment with Express and MongoDB " https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>これにより、ラムダ関数に接続する必要がある別の方法が作成されます。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
最後になりましたが、最後になりましたが、<soly <p> api<em>doct <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>ドロップダウンメニューで<em> deploy <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>を選択してAPIを展開します。ポップアップウィンドウで、<shipe <em> [新しいステージ]<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>を選択し、ステージに名前を付けて展開します。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<p>それだけです。作成されたフェーズのステージエディター<em>にある<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>コールurl<em>をクリックして、アプリケーションにアクセスできます。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>call url<em>は、APIゲートウェイにマッピングされたパブリックURLです。もちろん、これを行うためにカスタムドメインを使用することもできます。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712em>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p><h2>結論<strong><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712strong>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h2>データベースを必要とするより複雑なアプリケーションを展開することは必ずしも困難ではないことがわかります。もちろん、私があなたに示すワークフローは完璧とはほど遠いものであり、長期的には大規模なアプリケーションが必要とする多くの機能を欠いています。しかし、私にとっては、トラフィックが低く、中程度のウェブサイトにとって、シンプルで実用的で経済的であることが証明されています。非常によく似たテクノロジースタックを使用して、JSChallengerを構築および展開しました。 <p>
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>アイデアやコメントがある場合は、Twitter経由で @Kueckelheimにお問い合わせください。 <p>
ExpressおよびMongodb <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p><h2>を使用したサーバーレスの展開に関する<strong><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712strong>FAQ（FAQS）
<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h2>サーバーレスの展開にExpressとMongoDBを使用することの利点は何ですか？ <h3>
ExpressおよびMongoDBを使用したサーバーレスの展開には、いくつかの利点があります。まず、開発者はサーバー管理を心配することなくコードを作成することに集中できます。これは、サーバーレスアーキテクチャがサーバーを自動的に管理するためです。第二に、消費する計算時間を支払うだけで支払う必要があるため、費用対効果が高くなります。コードが実行されていない場合、料金は請求されません。第三に、サーバーレスの展開は、ワークロードサイズに基づいて自動的にスケーリングされます。これは、手動介入なしに需要が増加するにつれて、アプリケーションがより多くの要求を処理できることを意味します。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3>サーバーレスアプリケーションをデバッグする方法は？ <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p>サーバーレスアプリケーションの排水は、その分散された性質のために少し難しい場合があります。ただし、アプリケーションをデバッグするために使用できるいくつかの方法があります。最も一般的な方法の1つは、ロギングを使用することです。アプリケーションの実行に関する重要な情報を記録し、これらのログを分析して問題を見つけることができます。別のアプローチは、AWS X線などの分散追跡ツールを使用することです。これらのツールは、アプリケーションのパフォーマンスとボトルネックが発生する場所に関する洞察を提供します。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3>サーバーレスアプリケーションでエクスプレスミドルウェアを使用できますか？ <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p>はい、サーバーレスアプリケーションでExpress Middlewareを使用できます。 Express Middleware関数は、リクエストオブジェクト（Req）、応答オブジェクト（RES）、およびアプリケーションリクエスト応答サイクルの次のミドルウェア関数にアクセスできる関数です。これらの関数は、任意のコードを実行し、要求と応答オブジェクトを変更し、リクエスト応答サイクルを終了し、次のミドルウェア関数を呼び出すことができます。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3>サーバーレスアプリケーションを保護する方法は？ <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p>サーバーレスアプリケーションの保護には、複数のステップが含まれます。まず、最小許可の原則に従う必要があります。これは、機能に必要な権限のみを付与する必要があることを意味します。第二に、安静時および送信中に機密データを暗号化する必要があります。第三に、既知の脆弱性を回避するために、依存関係を定期的に更新する必要があります。最後に、異常な活動については、アプリケーションを監視する必要があります。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3>サーバーレスアプリケーションをローカルでテストする方法は？ <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p>サーバーレスオフラインなどのツールを使用して、サーバーレスアプリケーションをローカルでテストできます。このツールは、オンプレミスマシンでAWSラムダとAPIゲートウェイをエミュレートし、展開せずにサーバーレスアプリケーションをテストできるようにします。 JESTなどのユニットテストフレームワークを使用して、個々の機能をテストすることもできます。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3>サーバーレスアプリケーションを監視する方法は？ <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p>さまざまなツールを使用して、サーバーレスアプリケーションを監視できます。 AWSは、CloudWatchやX-Rayなどのいくつかの監視ツールを提供します。CloudWatchは、アプリケーションを監視し、システム全体のパフォーマンスの変更を理解して応答し、リソースの使用率を最適化し、統一された動作ステータスのビューを取得するためのデータと実用的な洞察を提供します。 X線は、マイクロサービスアーキテクチャを使用して構築されたものなど、開発者が生産分散アプリケーションを分析およびデバッグするのに役立ちます。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3>サーバーレスアプリケーションのエラーを処理する方法は？ <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p>コードのトライキャッチブロックを使用して、サーバーレスアプリケーションのエラーを処理できます。ミドルウェア関数を使用してエラーを処理することもできます。さらに、AWS Lambdaは故障したLambda関数を2回自動的に再試行し、他の再試行を構成できます。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3>サーバーレスアプリケーションのパフォーマンスを最適化する方法は？ <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p>サーバーレスアプリケーションのパフォーマンスを最適化するには、複数のステップが必要です。まず、関数に適切なメモリサイズを選択する必要があります。次に、展開パッケージのサイズを最小限に抑えて、コールドブート時間を短縮する必要があります。第三に、接続プールを使用してデータベース接続を再利用する必要があります。最後に、キャッシュを使用して、データベース呼び出しの数を減らす必要があります。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3>サーバーレスアプリケーションでMongodb Atlasを使用できますか？ <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p>はい、サーバーレスアプリケーションでMongodb Atlasを使用できます。 Mongodb Atlasは、Mongodbを構築した同じ人によって開発された完全に管理されたクラウドデータベースです。選択したクラウドにMongodbを展開、操作、拡張する簡単な方法を提供します。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p>
<h3>既存のExpressアプリケーションをサーバーレスアーキテクチャに移行する方法は？ <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712h3>
<p>既存のExpressアプリケーションをサーバーレスアーキテクチャに移行するには、複数のステップが含まれます。まず、アプリケーションを小さくて無国籍の関数にリファクタリングする必要があります。次に、サーバーレスアーキテクチャと互換性のないミドルウェアを交換する必要があります。最後に、アプリケーションを徹底的にテストして、サーバーレス環境で適切に機能することを確認する必要があります。 <https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712p></style></code>
      ログイン後にコピー

以上がExpressおよびMongodbを使用したサーバーレス展開のガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

前の記事：React Native Navigation Libraryを開始します 次の記事：20個の必須反応ツール
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2708
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2834
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
2389
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
2284
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
2362
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート