LoginSignup
3
0

More than 5 years have passed since last update.

個人的React周りベストプラクティス② - 準備編

Last updated at Posted at 2017-09-21

前の記事

前回:個人的React周りベストプラクティス① - 構成編

nvm node.js npmインストール

:one: nvmインストール

gitからnvmをclone

$ git clone git://github.com/creationix/nvm.git ~/.nvm
$ source ~/.nvm/nvm.sh

ターミナル立ち上げ時にnvmを読み込むように~/.bash_profileに以下の内容を記述

~/.bash_profile
if [[ -s ~/.nvm/nvm.sh ]];
 then source ~/.nvm/nvm.sh
fi

:two: node.jsインストール

Lambdaで使用できるnode.jsのバージョンの中で最新のバージョンにする(以下の場合は6.10)
image.png

インストール可能なnode.jsのバージョンは「nvm ls-remote」で確認できる

$ nvm ls-remote
$ nvm install v6.10.0
$ nvm alias default v6.10.0
$ node -v
v6.10.0

:three: npmアップデート

node.jsがインストールされた時にnpmもインストールされているはず
アップデートしておく

$ npm install -g npm

Serverless Framework

Lambda関数やそれにつながるイベント等をローカルからアップロードできるもの
パッケージと関数をzipで固めて→アップロードして→Api Gatewayと紐付けてといった手間をなくせる

:one: インストール

$ npm install serverless -g

AWS CLI

AWSに対してコマンド操作ができるようにするもの
上記Serverless Frameworkの中で使用しているので必要

:one: インストール

$ curl "https://bootstrap.pypa.io/get-pip.py" -o "get-pip.py"
$ python get-pip.py
$ pip install awscli

:two: IAMユーザ追加

AWSのIAMからユーザを作成する
管理ポリシーとして「AdministratorAccess」を指定
image.png

:three: IAMの資格情報を登録

image.png

$ aws configure
AWS Access Key ID [None]: 上記画像のアクセスキーIDの部分
AWS Secret Access Key [None]: 上記画像のシークレットアクセスキーの部分
Default region name [None]: ap-northeast-1
Default output format [None]: 未入力でENTER

create-react-app

React.jsの開発環境を簡単に作れるもの
webpackやbabelの設定をする必要がなくなる

:one: インストール

$ npm install -g create-react-app

次の記事

個人的React周りベストプラクティス③ - React・Reduxパッケージ・ミドルウェア編

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0