Chapter 07

フロントエンド構築手順

もっちゃん/Takashi Kawamoto
もっちゃん/Takashi Kawamoto
2021.05.08に更新

本番(AWS)フロントエンド環境構築

  • .env ファイルの設定

    line-api-use-case-table-order/front/.env ファイルのxxxxxxxxxの部分を変更してください。

    • LIFF_ID: LIFF アプリの LIFF IDを入力
    • BASE_URL: AWS APIGatewayのURLを入力

    ▼ .env ファイル

    # LIFF ID
    LIFF_ID=xxxxxxxxx-xxxxxxxxx
    
    # AXIOS BASE URL
    BASE_URL=https://xxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com
    
    # API Gateway Stage
    APIGATEWAY_STAGE=dev
    
    # Ajax Module (axios or amplify)
    AJAX_MODULE=amplify
    
  • node_modules インストール

    下記のコマンドを実行し、Node.js の依存パッケージ(node_modules)をインストールしてください。

    下記のコマンドをコピペして実行しましょう!

    cd ~/environment/line-api-use-case-table-order/front
    npm install
    
  • 静的ビルド

    下記のコマンドを実行し、S3 に配置する静的モジュール生成してください。

    下記のコマンドをコピペして実行しましょう!

    cd ~/environment/line-api-use-case-table-order/front
    npm run build
    

    ビルドが完了したら front/dist フォルダが生成されています。

  • S3 にフロントエンドのモジュールを配置

    下記のコマンドを実行し、dist フォルダの中身をS3に配置してください。

    下記のコマンドをコピペして実行しましょう!

    cd ~/environment/line-api-use-case-table-order/front
    aws s3 cp ./dist s3://lineawspaypay20210510<バックエンドで指定したバケット名> --recursive