coiai Logo
Featured

Amplify React デプロイまで

この記事ではAWS Amplify を使ってReacgtプロジェクトをビルドするまでの手順をメモとして残しています。

やり方

Amplify の初期設定

Amplify cli をインストールします。

npm install -g @aws-amplify/cli

次にAWS cli の認証情報を設定します。これはコンソールからIAMユーザーの作成と権限の付与が事前に必要です。

amplify configure

Amplify プロジェクトの初期化

用意してあるReactプロジェクトのディレクトリに移動して、次のコマンドを実行します。

cd your-react-project
amplify init

対話形式で色々と聞かれるので順に答えていきます。

APIの追加

amplify add api

このように必要なパッケージをaddします。

変更をpush

全て終わったらpushしましょう。

amplify push

デプロイ

デプロイ方法は2つあり、一つはこのままCLIで行う方法です。もう一つはAWS Amplify console でWeb上でデプロイをする方法です。

まずはCLIを使った方法です。

amplify add hosting
amplify publish

これでOKです。

もう一つのWeb上でのデプロイはamplify console に移動して、GitHubとリポジトリを連携していけばデプロイできます。

参考

参考にさせていただいた動画のリンクです。

投稿日: 2025年3月17日
カテゴリ: React
タグ: Amplify, AWS
coiai

coiai

この記事もおすすめ

ポッドキャストを取った後Audiotionですべきこと

ポッドキャストを取った後Audiotionですべきこと

この記事はポッドキャストなどの音声コンテンツを取った後にAuditionで編集する方法について解説しています。 環境 やること 基本的に以下の4つの工程をすると、かなりクオリティアップにつながります! ノイズリダクション 無音部分を選択します。開始地点をi, 終わりをo キーを押すと選択できます。選択できたらエフェクト→ノイズリダクション/リストア→ノイズプリントをキャプチャを押します。 続いて、全体を選択します。cmd, a で全選択になります。エフェクト→ノイズリダクション/リストア→ノイズリダクションを選択します。 以下のようなパネルが表示されうので、ノイズのみをきたりして、削減ちを調整して、良い感じになったら適応ボタンを押します。 シングルバンドコンプレッサ 左のパネルのエフェクトトラックから▶️ボタンを押し、振幅と圧縮→シングルバンドコンプレッッサを選択します。 選択すると下記のようなパネルが開きます。それぞれ、 といった意味があります。設定値は下記画像のようにしています。 設定がめんどくさい場合はプリセットからラジオレベラーを選択してください。 EQ(声をクリアにする) パラメトリックイコライザーを使用します。エフェクト→フィルターとイコライザ→パラメトリックイコライザーを選択します。 私の場合は下記のように設定しています。 無音カット エフェクト→診断→無音をカットをすると左パネルに診断が表示されます。 効果を無音を削除、プリセットをポッドキャストにするとちょうどよくなると思います。設定したら、スキャンボタンを教えて、全て削除で無音がカットされます。 かなりカットされてしまうので、短いCM等に使うのはありかなという感じです。 参考 Adobe 無音カット https://helpx.adobe.com/jp/audition/using/strip-silence.html

MetaStore コンテンツ型のアプリ内課金を実装する

MetaStore コンテンツ型のアプリ内課金を実装する

MetaStoreのコンテンツ型のアプリ内課金を実装する方法についてです。 コンテンツを追加する 右上のアドオンを作成ボタンを押す。 アドオンタイプ 一度購入したら、それ以降は購入しない設定は耐久型を選びます。アプリ内のコインや石など、消耗品は消耗品を選びます。 価格設定 価格設定タブに進むとコンテンツの価格を設定できます。有料のコンテンツをまだ登録したことない場合は支払い情報の設定が住んでいないはずなので、支払い情報の設定が先に必要になります。 DUC データユーズチェックアップ 左メニューの必要条件の中のデータ使用状況の確認を開きます。 例えばIAPでユーザー認識が必要な場合は User ID, ユーザー名が必要な場合は User Profile の追加ボタンを押します。 何に使うかの用途と説明が求められるのでそこに使用用途を記述してください。 ここまで出来たらリクエストを送信ボタンを押します。 このようにデータの取り扱いについて質問されるので答えてください。英語で書いてあるので、なんとなく何が書いてあるか順番にさらっと説明します。 データの使用状況の確認 左サイドバーから必要条件⇒データ使用状況の確認をクリックします。 これが設定されていないと以下の文言のポップアップが表示されます。 読んでくださった方へ 株式会社coiaiでは、Quest向け、PCVR、Vision OS向けの開発も得意としています。新規開発ももちろん、開発途中でメンバーが必要といった場合でも請け負えますので、ご相談ください!

この記事を書いた会社

株式会社coiaiは、「想像できることを美しく実現」を掲げ、XR・Web・アプリ・システム開発およびDX支援を行う会社です。 創業2022年、東京都練馬区に本社を置き、要件のヒアリングからPoC(概念実証)、本番運用まで一貫して伴走します。 まずはお気軽にご相談ください。

商号株式会社 coiai創業2022年1月設立2025年1月23日資本金1,500,000円(設立時点)本社所在地東京都練馬区関町北 3-6-9代表者代表取締役 竹村 啓佑 / 代表取締役 服部 陽良

主なご相談内容

会社概要・役員紹介を見る

詳しい会社情報は会社概要ページでご覧いただけます。

資料請求・無料相談

導入要件のヒアリングからPoC、本番運用まで伴走します。まずはお気軽にご相談ください。

お問い合わせの前に 個人情報保護方針 をご確認ください。