Skip to content

ShinjiroMoriya/React-Django-GraphQL-Sample

Repository files navigation

Heroku Sample App React/SSR/GraphQL

Heroku Button

Deploy

Language

  • Nodejs 10.2.1
  • Python 3.6.5

Web Framework

  • express (nodejs)
  • django (python)

Heroku Add-ons

  • Cloudinary
  • Postgres
  • heroku connect
  • Sendgrid

Heroku Config Vars

  • GRAPHQL_URL=https://[APP-NAME].herokuapp.com/graphql
  • DISABLE_COLLECTSTATIC=1

Heroku Buildbacks

Procfile

web: bin/runsvdir-dyno

Procfile.web

django: gunicorn -c tb_app/config.py tb_app.wsgi --bind 127.0.0.1:8888
node: npm run server

概要

バックエンドはDjango GraphQLで
フロントエンドはReact/Redux/SSR(expressjs)を利用したアプリケーション。

/graphqlディレクトリはhttp-proxy-middlewareを利用して
djangoアプリケーションのサーバーにアクセスしている。

const app = express();
app.use(
  proxy("/graphql", {
    target: "http://localhost:" + DJANGO_PORT
  })
);

Deploy

  • .env.productionファイルを作成し、GRAPHQL_URL=https://[APP-NAME].herokuapp.com/graphqlを書き込む。
  • $ npm run buildでビルドする。

Local開発

  • 基本的には$ npm run startで開発を進める。
  • SSRで確認する場合は、$ npm run dev_buildでビルドする。
  • サーバーは$ npm run dev_server
  • djangoの方もサーバーを立てる$ make server
  • 開発環境はSSLで構築されているので、sslのキーを発行する。

localhostでSSL

keyとcrtを発行コマンド

openssl req -x509 -out localhost.crt -keyout localhost.key -newkey rsa:2048 -nodes -sha256 -subj '/CN=localhost' -extensions EXT -config <( printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

Heroku Connect を使う場合

  • Salesforceでカスタムオブジェクト、Space、Newsを作成する。
  • heroku buttonでデプロイ後
  • heroku run bash --app アプリ名
  • addonのheroku-connectを追加してContact、Space、Newsをmappingする。
  • python manage.py migrate account_token

Heroku Connect を使わない場合

$ heroku run bash --app アプリ名
$ make init

Heroku Connect を使わない場合のサンプルアカウント

/registerにアクセスして、
Emailにsample@example.comを入力してパスワード登録する。 ※新規Emailの登録は不可です。

Salesforce データ構造

Contact (取引先責任者)

contact

Space__c (カスタムオブジェクト)

space__c

News__c (カスタムオブジェクト)

news__c

About

Heroku環境でReactとGraphQLのアプリケーション

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published