- 投稿日:2019-08-30T23:20:18+09:00
Expoのアカウントを作ってReact Nativeの開発環境を整える
この記事は、「【連載】初めてのReact Native + Expo開発環境構築入門」の子記事です。環境などの条件は、親記事をご覧ください。
React Native を開発するにあたって、モジュールのバージョン管理やらデバッグ環境準備やら公開作業やらから解放されたい時には、Expoが便利です。今回は、Expoを使う前に必要な準備を整えていきます。Windows 10で実施しますが、MacやLinuxでも基本は同じです。
アカウント作成
Expoを使うには、アカウントを作成する必要があります。
まず、Expo.ioを開いて、「Create an account」をクリックします。
次に、Email、希望するユーザーID、パスワード2回を入れて、「Create your account」をクリック。
Projectsタブの中は空っぽですが、プロジェクトを追加するようなボタンはここにはありません。その代わりに「Learn how to get started」というリンクがありますね。このリンク先の説明に従って、これから開発するプロジェクトを作ることになりますが、ここではそのうちの不要ないくつかをスキップしながら進めます。
少し待ったらExpoからEmailの確認が届くので、Email本文内のリンクをクリックして確認を済ませてください。
Node.js を準備する
Expoを使った開発を行うには、まず自分のローカルPCにNode.jsをインストールする必要があります。Node.jsのバージョンは最新を使え、と書いてありますので、まだNode.jsをローカルPCにインストールしてない場合はNode.jsのサイトからLTS版をインストールしましょう。
Expo-CLI をインストールする
では、Node.jsのインストールで一緒にインストールされたnpmを使って、Expo-CLI(Expoのプロジェクトを作ったりパブリッシュしたりするためのコマンドライン機能)をローカルPCにインストールしましょう。
PowerShellを立ち上げて、
以下のコマンドを実行します。
npm install expo-cli --globalWARNはいくつかでますが、ERRORが出てなければ問題ないはずです。
Expoプロジェクトを格納するフォルダを作る
今後たくさんのExpoプロジェクトを作ることになるので、プロジェクト用フォルダを作っておきましょう。例えば
C:\ExpoProjects
など。PowerShellで、以下のようにします。> cd / > mkdir ExpoProjectsExpoプロジェクトを作成する
それではテストで1つ、HelloWorldプロジェクトを作りましょう。PowerShellで先ほど作ったプロジェクト用フォルダに入り、プロジェクトを作ります。
> cd /ExpoProjects > expo init hello-world新規プロジェクト作成では、テンプレートが選択できます。ここでは
blank
を選びます(Enterキー)。
また、プロジェクトの表示名を聞かれるので、キーボードで入力してEnterキーで確定します。ここでは「Hello World!」
またもやWARNはいくつかでますが、ERRORが出てなければ問題ないはずです。
では、Hello Worldプロジェクトを実行してみましょう。> cd hello-world > expo startファイアーウォールの警告が出た場合は、通信を許可してください。
うまくいったら以下のようにブラウザが開いて、QRコードが表示されます。Expo Clientアプリで実行を確認
実行結果の確認は、iPhoneまたはAndroidの実機にExpo Clientというアプリをインストールして、そのアプリでQRコードを読むことで実施します。(今回はiPhoneで試します)
手元のスマホにExpo Clientをインストールし、自分のExpoアカウントでログインしたのち、カメラアプリから先ほど表示したQRコードを読み込んでみてください。
Expo Clientがうまくいかない場合
Expoは、ローカルPC上で
expo start
することで、Expoサーバーとして動作します。モバイル(iPhoneやAndroid)上のExpo Clientは、そのサーバーにプロジェクトのアプリを取得しに行って、取得が終わったら実行することになります。つまり、モバイルとローカルPCが直接通信できる状態になければExpo Clientが動作しないことになります。うまくいかない場合、以下を確認しましょう。
- ローカルPCのファイアーウォールで19000や19001のポートが拒否されていないか。
- ローカルPCの参加するサブネットと、モバイルの参加するサブネットが同じか。
- ローカルネットワーク上で端末同士の通信が許可されているか。
- 仮想PC上で
expo start
したなら、仮想PCとモバイルと同じサブネットのIPアドレスに見えているか。ほかに、初回ビルドが遅すぎてClient側が待てなくてタイムアウトすることもあります。。。
いろいろ試してダメな場合は、ConnectionでTunnelを選んでやり直してみてください。初回画面
うまくいくと、Expo Clientの初期画面が表示されます。
上に表示されているのが初回だけ表示される内容で、意訳すると「デバイスを振るとこのメニューに戻れるからねー」です。Got itでとじましょう。閉じた後に実際の実行結果が表示されます。
真っ白な画面に、「App.jsを開けて開発を始めよう!」と出るだけですが、このメッセージはReactのコードから出力されています!簡単!
- 投稿日:2019-08-30T23:18:59+09:00
【連載】初めてのReact Native + Expo開発環境構築入門(Windowsベース)
この記事では、Windows 10にExpoを使ったReact Nativeの開発環境を1から構築し、サンプルアプリを作成するところまでをゴールとします。
1つの記事ですべてカバーできないので、いくつかの記事に分けて少しずつ投稿していく連載にしていきます。連載は2019年9月から10月の期間を予定しています。
なお、筆者はアメリカで開発業務を行っているため、選択するトレンドなどはアメリカ主体となります。環境
開発環境は、2019年8月時点最新の以下のソフトウェアで構築します。
- Chrome 最新 (76.0.3809.100 (64-bit))
- Visual Studio Code 最新 (1.37.1)
- Node.js + npm 最新 (10.16.3)
なぜExpo?
モバイルアプリ開発のクロスプラットフォームには、Cordova (ionicやMonaca含む)、Xamarin、最近ではFlutterなどいくつもの選択肢がありますが、その中で以下のメリットが強いときにReact Native + Expoを使うのがよいかと思います。
- とにかく開発工数を小さくしたい。
- 業務用アプリなどで、細部にはあまりこだわらない
- Web開発の知識をなるべくそのまま応用したい。
- JavaScriptの知識をメインにして作りたい
- Reactの知識がすでにある
- デバイスに依存した機能は使わないプロジェクト、またはモックアップ用
- 実機でデバッグを簡単に実施したい
- 簡単に配布したい
同じような条件では、Monacaが競合に入ってきます。実際私も過去にMonacaを使って開発しましたが、Reactのメリットを感じない場合はMonacaでもいいかなと思います。ただ、最近よくReactを使うから今さらjQueryはあまり積極的に使いたくないとか、データ取り扱いでやっぱりReactにメリットを感じるといった場合は、Expoサイコーでよいと思います。
なお、React Native (=react-native-cli)じゃなくてReact Native + Expoな理由は、この辺りの記事が参考になります。
記事一覧
連載内容の予定です。途中で大幅に変更する可能性があります。
- Expoのアカウントを作ってReact Nativeの開発環境を整える
- React Native Expoの編集環境をVisual Studio Codeで準備する
- React Native + Expo + Visual Studio Code + Chrome で実機デバッグする
- エミュレータでデバッグする -> スキップ
- React Native + Expo に、ルート管理ライブラリreact-navigationを導入する
- [画面構成の計画を立てる]
- [画面デザインを作成する]
- [画面間を移動する]
- [サーバーからデータを取得する]
- [QRコードからURLを取得する]
- [データの永続化を実現する]
- [社内配布方法]
- 投稿日:2019-08-30T18:52:27+09:00
よく分からないReactエラーメッセージ [メモ]
React/JSX特有のエラーメッセージは、明確になぜいけないのか教えてくれていることが少ない気がします。
sono1
does not exist on type 'JSX.IntrinsicElements'. TS2339以下のコードで怒られました。
render(){ return ( <test /> ) } let test = () => { return (<Grid>aa</Grid>); }なにがいけないのかさっぱりわからなかったのですが、関数コンポーネント名の最初
の文字を大文字にしたら、普通にコインパイル通りました。sono2
Expected an assignment or function call and instead saw an expression no-unused-expressions[JSXタグ]をReturnで返していない
let test = () => { (<Grid>aa</Grid>); }
- 投稿日:2019-08-30T17:36:38+09:00
styled-componentsをTypeScriptで使うTips
styled-componentsをTSで使うケースは多いですが、意外とまとまった記事がなく、聞かれることが多いのでかきました。
propsに型をつける
親が特定のreact component出ないときは、下記のようにシンプルに書くのがおすすめです。
const Button = styled.button<{primary: boolean}>` color: ${({primary}) => primary ? 'skyblue' }; `一方、コンポーネントが複雑になったり親のpropsを参照する場合は、Pickを使っても良いです。
interface Props { primary secondary // 略 } function MyComponent(props: Props) { return ( <div> <Button secondary={props.secondary} primary={props.primary}>{props.children}</Button> </div> ) } const Button = styled.button<Pick<Props, 'primary' | 'secondary'>>` ${({primary, secondary}) => primary ? css`` : secondary ? css`` : css``} `定数に型をつける
色やサイズなどの定数に型を付けると、利用するときにどのpxが適用されるのかがわかって便利です。
const FONT = { XXXLARGE: 32, XXLARGE: 24, XLARGE: 18, LARGE: 16, MEDIUM: 14, BASE: 12, SMALL: 11, XSMALL: 10, TINY: 8, } as const const FONT_WEIGHT = { NORMAL: 400, BOLD: 600, } as const const BORDER_RADIUS = 4 as 4 export default { FONT, FONT_WEIGHT, BORDER_RADIUS }このようにすることで、↓エディタのsuggestion機能でどの定数がどのpxを持っているかを確認することが出来ます。
css propを使うとき
babel-pluginや、babel macroで有効になるcss propは、jsxの拡張になるため何もしないとTSに怒られます。
type rootのindex.d.tsで下記を記述すれば解決します。(styled-components/csspropはreactの拡張をしています)import {} from 'styled-components/cssprop'attrsを使うとき
これはちょっと面倒な書き方をしなければいけないので、そもそもattrsを多用しないのもありかもしれません。
const StyledImg = styled.img.attrs<{ logoSrc: logoSrc }>( ({logoSrc}) => ({ src: logoSrc, }) )<{ logoSrc: logoSrc }>``
- 投稿日:2019-08-30T15:38:25+09:00
Docker + Rails + React
Docker + Rails + React
streampack の minsu です。
今年の夏は主に室内で過ごしていましたが、先日帰省した折に中古のカメラを手に入れたので今後はアウトドアな趣味としてお散歩カメラをきめこみたいと考えています。
涼しくなったら、たぶん目的
フロント: React
バック: Rails
を Docker を利用して構築します。React + Rails ですが webpacker を利用する方法で行います。
ファイルの用意
まず、
Gemfile
、Gemfile.lock
、Dockerfile
、dcocker-compose.yml
を用意します。Gemfilesource 'https://rubygems.org' gem 'rails', '5.1.4'DockerfileFROM ruby:2.4.1 RUN apt-get update -qq && apt-get install -y mysql-client build-essential nodejs apt-transport-https RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list RUN apt-get update && apt-get install -y yarn RUN mkdir /app WORKDIR /app COPY Gemfile /app/Gemfile COPY Gemfile.lock /app/Gemfile.lock RUN bundle install COPY . /appdocker-compose.ymlversion: '3' services: app: build: . command: /bin/sh -c "rm -f /app/tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'" volumes: - .:/app ports: - "3000:3000" depends_on: - db db: image: mysql:5.7 command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci environment: - MYSQL_ROOT_PASSWORD=root volumes: - mysql_vol:/var/lib/mysql volumes: mysql_vol:pid は、開発用WEBサーバを起動するときに tmp/pids/server.pidに書き込まれて終了するときに削除されるのですが、なんらかの要因で削除されずに終了した場合は起動中と判断されて新たにサーバを起動できないので
rm -f /app/tmp/pids/server.pid
で起動時に削除します。rails new
コンテナから rails プロジェクトを作成します。
Gemfileは上書き、DBはMySQLを指定します。$ docker-compose run app rails new . --force --database=mysqldocker-compose.yml の mysql の rootパスワードを
MYSQL_ROOT_PASSWORD=root
に設定したので config/database.yml の development に設定を追加しました。
host も同じく指定した db に変更します。config/database.ymlusername: root password: root host: dbGemfile に
gem 'webpacker' gem 'react-rails'を追加し、 bundle install しなおした後に
$ docker-compose build次のコマンドを実行します。
$ docker-compose run app rails webpacker:install $ docker-compose run app rails webpacker:install:react $ docker-compose run app rails generate react:install上の2行は rails new のタイミングで
--webpack=react
のオプションを追加でも良かったみたいです。
package.json
の更新や
app/javascript/packs/
配下にapplication.js
、hello_react.jsx
が作成されます。db、 model 作成
適当な model と seeds データを用意して DB を作成後にデータを入れます。
$ docker-compose run app rails g model List title:string desc:stringdb/seeds.rb5.times do List.create( title: 'title_' + SecureRandom.hex(4), desc: 'desc_' + SecureRandom.hex(4) ) end$ docker-compose run app rails db:create $ docker-compose run app rails db:migrate作成したモデルを一覧表示させてみます。
controller、view を作成
$ docker-compose run app rails g controller Lists indexlists_controller.rbdef index @lists = List.all endview では
javascript_pack_tag
とreact_component
のタグを用いて js を呼び出します。lists/index.html.erb<%= javascript_pack_tag 'application' %> <h1>Lists#index</h1> <%= react_component 'Lists', lists: @lists %>react component 作成
順番が前後しましたが、 view で呼び出している components を実装します。
$ rails g react:component Listsのコマンドで app/javascript/components/Lists.js が作成されるので編集します。
Lists.jsimport React from "react" import PropTypes from "prop-types" export default class Lists extends React.Component { constructor(props){ super(props) this.state = { lists: [] }; } componentDidMount(){ this.setState({ lists: this.props.lists }) } render () { return ( <div> <table> <thead> <tr> <th>ID</th> <th>Title</th> <th>Description</th> <th>created_at</th> <th>updated_at</th> </tr> </thead> <tbody> {this.state.lists.map((list) => { return ( <tr key={list.id}> <td>{list.id}</td> <td>{list.title}</td> <td>{list.desc}</td> <td>{list.created_at}</td> <td>{list.updated_at}</td> </tr> ); })} </tbody> </table> </div> ); } }動作確認
rails, webpack を立ち上げます。
$ docker-compose up -d $ docker-compose run app bin/webpack-dev-server
http://localhost:3000/lists/index
にアクセスします。
無事に一覧が表示されました。まとめ
起動と表示確認までを行いました。
この状態では何の機能もないので React での CRUD 操作を実装するまでを追記、または新しく記事にしたいと思います。
- 投稿日:2019-08-30T00:46:21+09:00
【React-Static】Strapiでブログポストを更新してReact-Staticで表示する
はじめに
プログラミング歴2ヶ月の素人が書いています。(間違っていたらご指摘ください)
「React-StaticのブログデータをStrapiで作って更新する」ための学習メモです。
Stripiのインストール
Stripiのデプロイ
*デプロイしたStripiとReact-Staticの接続
上記3点についてまとめます。
?React-Static公式?
https://github.com/react-static/react-static今回の目的
静的サイトジェネレータReact-Staticを初めて使います。
NetlifyにデプロイしたReact-Staticのブログを更新するために、Strapiでコンテンツを作り、React-Staticのブログで読み込みます。
?成果物
React-Staticのブログを作ってNetlifyにデプロイする
前回記事を参照
『静的サイトジェネレータReact-Staticを使ってみる』
https://qiita.com/shin-ph/items/a6b03412b0822d8be24bStrapiとは
?公式ドキュメント(英語)
https://strapi.io/documentation/3.0.0-beta.x/getting-started/quick-start.html#_1-install-strapi-globallyそもそもStrapiとは、「HeadlessCMS」 と呼ばれるサービスの一つです。
「CMS」とは、「コンテンツ管理システム(Content Management System)」の略称です。WordPressもCMSです。
HeadlessCMSは、頭がない、つまりフロントエンドは無く、コンテンツを管理するバックエンド側だけを提供するCMSです。
フロントは自分で用意する必要があります。(今回はReact-Staticで生成した静的サイト)
Strapiのインストール
cmdlinenpm install strapi@beta -gstrapiをグローバルにインストールします。
プロジェクトの作成
cmdlinestrapi new my-project --quickstartCurrent Directory内に、
my-project
という名前のディレクトリでプロジェクトが生成されます。strapiのadmin画面へのログイン
プロジェクトを作成すると、自動的にローカルホストでサーバーが立ち上がり、ブラウザにログイン画面が表示されます。
表示されない場合は、http://localhost:1337/admin かと思います。コンテンツタイプの作成
ログインを終えると、管理画面が表示されます。
まずは、コンテンツタイプの作成を行います。今回は、ブログの記事を作りたいので、
『title(string)』
『content(text)』
『image(media)』
の3つをフィールドに持つコンテンツタイプを作成し、保存します。
権限の設定
外からもデータの読み込みができるよう、ロールと権限の設定を行います。
『Public』をクリックします。
今回は読み込みのみ行いますので、『Find』と『FindAll』にチェックを入れて、保存します。
投稿のテストとJSONの確認
作成したコンテンツのタブから、エントリーの追加をします。
ルート以下を
/コンテンツ名
にして、URLに打ち込むと、先ほど追加したエントリがJSONになっているのが確認できます。
http://localhost:1337/postsでも、このままではローカルホストなので、本番環境では動きません。
ここから、Herokuにデプロイしていきます。Herokuにデプロイする
?公式
https://strapi.io/documentation/3.0.0-alpha.x/guides/deployment.html#herokuHeroku CLIのインストール
cmdlinebrew tap heroku/brew && brew install herokuHerokuにログインする
cmdlineheroku login
.gitignore
にpackage-lock.json
を加える
./my-project/.gitignore
ファイルに、package-lock.json
を加えます。
(.gitignore
ファイルの最後の行に、コピーする)ファイル名の先頭に
.(ドット)
がついている場合、隠しファイルです。
通常見えなくなっています。
隠しファイルの表示については、以下の記事がわかりやすいかと思います。
『【Mac】隠しファイル・隠しフォルダを表示する方法』
https://qiita.com/TsukasaHasegawa/items/fa8e783a556dc1a08f51gitリポジトリを初期化してコミットする
cmdlinecd my-project git init git add . git commit -am "Initial Commit"Herokuプロジェクトの作成
cmdlineheroku createHerokuデータベースのセットアップ
HerokuのPostgreSQLアドオンを利用します。ここでは無料プラン(Hobby Devプラン)を使用します。
アドオンの追加
cmdlineeroku addons:create heroku-postgresql:hobby-devデータベース情報の取得
cmdlineheroku configコマンドを実行すると、以下のような文字列が出力されます。
DATABASE_URL: postgres://ebitxebvixeeqd:dc59b16dedb3a1eef84d4999sb4baf@ec2-50-37-231-192.compute-2.amazonaws.com: 5432/d516fp1u21ph7b
内容は、以下のようになっています。
postgres:// USERNAME : PASSWORD @ HOST : PORT : DATABASE_NAME
Heroku Configの設定
cmdlineheroku config:set DATABASE_USERNAME=ebitxebvixeeqd heroku config:set DATABASE_PASSWORD=dc59b16dedb3a1eef84d4999a0be041bd419c474cd4a0973efc7c9339afb4baf heroku config:set DATABASE_HOST=ec2-50-37-231-192.compute-2.amazonaws.com heroku config:set DATABASE_PORT=5432 heroku config:set DATABASE_NAME=d516fp1u21ph7b『=(イコール)』以下を、先ほど取得したデータベース情報に書き換えて実行します。
データベースの設定ファイルの書き換え
./config/environments/production/database.json
の内容を以下に書き換えます。database.json{ "defaultConnection": "default", "connections": { "default": { "connector": "strapi-hook-bookshelf", "settings": { "client": "postgres", "host": "${process.env.DATABASE_HOST}", "port": "${process.env.DATABASE_PORT}", "database": "${process.env.DATABASE_NAME}", "username": "${process.env.DATABASE_USERNAME}", "password": "${process.env.DATABASE_PASSWORD}", "ssl": true }, "options": {} } } }pg node moduleのインストール
cmdlinenpm install pg --saveここまでの変更をコミット
cmdlinegit commit -am "Update database config"デプロイする
cmdlinegit push heroku masterプッシュできたら、
cmdlineheroku openで、こんどはヘロクサーバーからログイン画面へ推移します。
ローカルでログインした時と同じnameとpasswordでログインします。
axios.get()
の取得元をHerokuにする
React-Static
プロジェクト内の、static-config.js
内で、ブログの内容を取得しています。
axios.get()
の引数を、https://yourreponame.herokuapp.com/コンテンツ名
とすることで、先ほどデプロイしたStripiからJSONを取得できます。static-config.jsimport path from 'path' import axios from 'axios' export default { getRoutes: async () => { const { data: posts } = await axios.get( 'https://damp-thicket-88898.herokuapp.com/posts' ) return [...React-StaticプロジェクトのPush
『静的サイトジェネレータReact-Staticを使ってみる』
https://qiita.com/shin-ph/items/a6b03412b0822d8be24b上記の手順を踏んでNetlifyにデプロイしている場合は、
React-Staticプロジェクトをプッシュするだけで、自動的に本番環境がNetlifyでビルドされてデプロイされます。
react:static-config.js
の変更をコミットして、githubリポジトリにプッシュします。本番サイトの確認
きちんとブログの内容が書き換わっていれば、成功です。
まとめ
Stripiのインストール
Stripiのデプロイ
デプロイしたStripiとReact-Staticの接続
についてまとめました。
- 投稿日:2019-08-30T00:46:21+09:00
【React-Static】Strapiでブログを更新してReact-Staticで表示する
はじめに
プログラミング歴2ヶ月の素人が書いています。(間違っていたらご指摘ください)
「React-StaticのブログデータをStrapiで作って更新する」ための学習メモです。
Stripiのインストール
Stripiのデプロイ
*デプロイしたStripiとReact-Staticの接続
上記3点についてまとめます。
?React-Static公式?
https://github.com/react-static/react-static今回の目的
静的サイトジェネレータReact-Staticを初めて使います。
NetlifyにデプロイしたReact-Staticのブログを更新するために、Strapiでコンテンツを作り、React-Staticのブログで読み込みます。
?成果物
React-Staticのブログを作ってNetlifyにデプロイする
前回記事を参照
『静的サイトジェネレータReact-Staticを使ってみる』
https://qiita.com/shin-ph/items/a6b03412b0822d8be24bStrapiとは
?公式ドキュメント(英語)
https://strapi.io/documentation/3.0.0-beta.x/getting-started/quick-start.html#_1-install-strapi-globallyそもそもStrapiとは、「HeadlessCMS」 と呼ばれるサービスの一つです。
「CMS」とは、「コンテンツ管理システム(Content Management System)」の略称です。WordPressもCMSです。
HeadlessCMSは、頭がない、つまりフロントエンドは無く、コンテンツを管理するバックエンド側だけを提供するCMSです。
フロントは自分で用意する必要があります。(今回はReact-Staticで生成した静的サイト)
Strapiのインストール
cmdlinenpm install strapi@beta -gstrapiをグローバルにインストールします。
プロジェクトの作成
cmdlinestrapi new my-project --quickstartCurrent Directory内に、
my-project
という名前のディレクトリでプロジェクトが生成されます。strapiのadmin画面へのログイン
プロジェクトを作成すると、自動的にローカルホストでサーバーが立ち上がり、ブラウザにログイン画面が表示されます。
表示されない場合は、http://localhost:1337/admin かと思います。コンテンツタイプの作成
ログインを終えると、管理画面が表示されます。
まずは、コンテンツタイプの作成を行います。今回は、ブログの記事を作りたいので、
『title(string)』
『content(text)』
『image(media)』
の3つをフィールドに持つコンテンツタイプを作成し、保存します。
権限の設定
外からもデータの読み込みができるよう、ロールと権限の設定を行います。
『Public』をクリックします。
今回は読み込みのみ行いますので、『Find』と『FindAll』にチェックを入れて、保存します。
投稿のテストとJSONの確認
作成したコンテンツのタブから、エントリーの追加をします。
ルート以下を
/コンテンツ名
にして、URLに打ち込むと、先ほど追加したエントリがJSONになっているのが確認できます。
http://localhost:1337/postsでも、このままではローカルホストなので、本番環境では動きません。
ここから、Herokuにデプロイしていきます。Herokuにデプロイする
?公式
https://strapi.io/documentation/3.0.0-alpha.x/guides/deployment.html#herokuHeroku CLIのインストール
cmdlinebrew tap heroku/brew && brew install herokuHerokuにログインする
cmdlineheroku login
.gitignore
にpackage-lock.json
を加える
./my-project/.gitignore
ファイルに、package-lock.json
を加えます。
(.gitignore
ファイルの最後の行に、コピーする)ファイル名の先頭に
.(ドット)
がついている場合、隠しファイルです。
通常見えなくなっています。
隠しファイルの表示については、以下の記事がわかりやすいかと思います。
『【Mac】隠しファイル・隠しフォルダを表示する方法』
https://qiita.com/TsukasaHasegawa/items/fa8e783a556dc1a08f51gitリポジトリを初期化してコミットする
cmdlinecd my-project git init git add . git commit -am "Initial Commit"Herokuプロジェクトの作成
cmdlineheroku createHerokuデータベースのセットアップ
https://jp.heroku.com/postgres
HerokuのPostgreSQLアドオンを利用します。ここでは無料プラン(Hobby Devプラン)を使用します。アドオンの追加
cmdlineeroku addons:create heroku-postgresql:hobby-devデータベース情報(クレデンシャル(資格情報))の取得
cmdlineheroku configコマンドを実行すると、以下のような文字列が出力されます。
DATABASE_URL: postgres://ebitxebvixeeqd:dc59b16dedb3a1eef84d4999sb4baf@ec2-50-37-231-192.compute-2.amazonaws.com: 5432/d516fp1u21ph7b
内容は、以下のようになっています。
postgres:// USERNAME : PASSWORD @ HOST : PORT : DATABASE_NAME
Heroku Configの設定
cmdlineheroku config:set DATABASE_USERNAME=ebitxebvixeeqd heroku config:set DATABASE_PASSWORD=dc59b16dedb3a1eef84d4999a0be041bd419c474cd4a0973efc7c9339afb4baf heroku config:set DATABASE_HOST=ec2-50-37-231-192.compute-2.amazonaws.com heroku config:set DATABASE_PORT=5432 heroku config:set DATABASE_NAME=d516fp1u21ph7b『=(イコール)』以下を、先ほど取得したデータベース情報に書き換えて実行します。
データベースの設定ファイルの書き換え
./config/environments/production/database.json
の内容を以下に書き換えます。database.json{ "defaultConnection": "default", "connections": { "default": { "connector": "strapi-hook-bookshelf", "settings": { "client": "postgres", "host": "${process.env.DATABASE_HOST}", "port": "${process.env.DATABASE_PORT}", "database": "${process.env.DATABASE_NAME}", "username": "${process.env.DATABASE_USERNAME}", "password": "${process.env.DATABASE_PASSWORD}", "ssl": true }, "options": {} } } }pg node moduleのインストール
cmdlinenpm install pg --saveここまでの変更をコミット
cmdlinegit commit -am "Update database config"デプロイする
cmdlinegit push heroku masterプッシュできたら、
cmdlineheroku openで、こんどはヘロクサーバーからログイン画面へ推移します。
ローカルでログインした時と同じnameとpasswordでログインします。
axios.get()
の取得元をHerokuにする
React-Static
プロジェクト内の、static-config.js
内で、ブログの内容を取得しています。
axios.get()
の引数を、https://yourreponame.herokuapp.com/コンテンツ名
とすることで、先ほどデプロイしたStripiからJSONを取得できます。static-config.jsimport path from 'path' import axios from 'axios' export default { getRoutes: async () => { const { data: posts } = await axios.get( 'https://damp-thicket-88898.herokuapp.com/posts' ) return [...React-StaticプロジェクトのPush
『静的サイトジェネレータReact-Staticを使ってみる』
https://qiita.com/shin-ph/items/a6b03412b0822d8be24b上記の手順を踏んでNetlifyにデプロイしている場合は、
React-Staticプロジェクトをプッシュするだけで、自動的に本番環境がNetlifyでビルドされてデプロイされます。
react:static-config.js
の変更をコミットして、githubリポジトリにプッシュします。本番サイトの確認
きちんとブログの内容が書き換わっていれば、成功です。
まとめ
Stripiのインストール
Stripiのデプロイ
デプロイしたStripiとReact-Staticの接続
についてまとめました。