20200701のReactに関する記事は3件です。

無料で1日でサービスを開始できる時代。ただ、ユーザーをどう増やすか。

最近、暇で以下のサービスを作った。
https://deau-project.herokuapp.com/

3日でサービスを開始した。
こんな感じ。

1日目: 何を作るのか。環境はどうするか。
=> メールで出会うサービスで、Heroku, React, Go Gin に決定してデプロイした。
https://devcenter.heroku.com/articles/getting-started-with-go

2日目: React でデザインから実装。
=> 以下のテンプレートを組み合わせてフォームを実装した。
https://github.com/mui-org/material-ui/tree/master/docs/src/pages/getting-started/templates/album
https://github.com/mui-org/material-ui/tree/master/docs/src/pages/getting-started/templates/sign-in
https://react-hook-form.com/jp/

3日目: Go Gin でメール送信を実装。あと、バグ修正。

色々と悩みながら実装したので、これを、悩みの時間抜きにギュッとすると一日で実装できる。

今日はサービス開始の2日目。
リリースと同時に、ブログを書いたので、そのリンクからユーザーが50人ぐらい来て、12人ほどメール送信してくれた。

さて、これからどうやってユーザーを増やすか。
無料でやるなら、SNSやブログ。
ただ、時間がかかる。

やはり、広告しかないのか。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

docker-composeを使って、ラクラクReact環境構築!

はじめに

これは『React環境構築の際にイチイチ調べ直すのがめんどくさい:expressionless:』と、自分向けにメモった記事です。
オレオレ記事ですが、ラクラクなので、是非参考にして頂ければと思います。

1. GitHubリポジトリを用意

リポジトリを作成してクローンしてきましょう。

$ git clone git@github.com:ユーザ名/リポジトリ.git

2. .gitignoreを先に作成

gitignoreファイルは一つにまとめたいので、先に作成して、自動で作られるものは削除しています。
アプリのルートディレクトリに以下の.gitignoreファイルを作成。

# dependencies
node_modules/
.pnp/
.pnp.js

# testing
coverage/

# production
build/

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

3. dockerfileの作成

アプリのルートディレクトリに以下のdockerfileファイルを作成。

dockerfile
FROM node:12.17.0

RUN mkdir /build
WORKDIR /build

4. dockerfileのbuildとrun!

dockerのイメージ作成とcreate-react-appを行っていきます。

$ docker build -t node:build .
$ docker run --rm -v "$PWD":/build node:build npx create-react-app my-app

まず1行目ではdockerのイメージ作成とタグ付け、カレントディレクトリを指定しています。
2行目ではVolumeの設定でホスト側のディレクトリからコンテナ側にマウントを取ります。(これによって変更が有効になる)
次にイメージとタグを指定して、最後にnpx create-react-appのコマンドを実行しています。

これでmy-app下に色々生成されていたら成功です!

5. docker-compose.ymlMakefileを作成

またアプリのルートディレクトリ下でdocker-compose.ymlMakefileを以下のように作成します

docker-compose.yml
version: "3.3"
services:
  react:
    build: ./
    working_dir: /code
    volumes:
      - ./my-app:/code
    ports:
      - 3000:3000
    environment: 
      - NODE_ENV=production
    container_name: tutorial
library := ""

start:
    docker-compose run --rm react yarn start

add:
    docker-compose run --rm react yarn add $(library)

6. ローカルでサーバを立ち上げる!

以下のようにmake startを実行してください

$ make start 

make startdocker-compose run --rm react yarn startを実行していて、記述をMakefileにて短縮しています。
ローカルでサーバーが立ち上がって、Reactマークがくるくる回っていたら成功です!!

+α 新しくパッケージをインストールしたい時

本当はdocker-compose run --rm react yarn startを実行しています。

# 使用例
$ make add library=redux

さいごに

まだまだ初心者なので、『もっとこうやって作成したら良いよ!』などなどアドバイスをご教授頂けたら、超喜びますm(_ _)m

※ご教授して頂けた方、とても良い感じになりました!ありがとうございます!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

DockerでラクラクReact環境構築!

はじめに

これは『React環境構築の際にイチイチ調べ直すのがめんどくさい:expressionless:』と、自分向けにメモった記事です。
オレオレ記事ですが、ラクラクなので、是非参考にして頂ければと思います。

1. GitHubリポジトリを用意

リポジトリを作成してクローンしてきましょう。

$ git clone git@github.com:ユーザ名/リポジトリ.git

2. .gitignoreを先に作成

gitignoreファイルは一つにまとめたいので、先に作成して、自動で作られるものは削除しています。
アプリのルートディレクトリに以下の.gitignoreファイルを作成。

.gitignore
# dependencies
node_modules/
.pnp/
.pnp.js

# testing
coverage/

# production
build/

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

3. dockerfileの作成

アプリのルートディレクトリに以下のdockerfileファイルを作成。

dockerfile
FROM node:12.17.0

RUN mkdir /build
WORKDIR /build

4. dockerfileのbuildとrun!

dockerのイメージ作成とcreate-react-appを行っていきます。

$ docker build -t node:build .
$ docker run --rm -v "$PWD":/build node:build npx create-react-app my-app(←アプリ名はご自由に。)

まず1行目ではdockerのイメージ作成とタグ付け、カレントディレクトリを指定しています。
2行目ではVolumeの設定でホスト側のディレクトリからコンテナ側にマウントを取ります。(これによって変更が有効になる)
次にイメージとタグを指定して、最後にnpx create-react-appのコマンドを実行しています。

これでmy-app下に色々生成されていたら成功です!

5. docker-compose.ymlMakefileを作成

またアプリのルートディレクトリ下でdocker-compose.ymlMakefileを以下のように作成します

docker-compose.yml
version: "3.3"
services:
  react:
    build: ./
    working_dir: /code
    volumes:
      - ./my-app:/code
    ports:
      - 3000:3000
    environment: 
      - NODE_ENV=production
    container_name: container_name # ←コンテナ名はご自由に。
Makefile
library := ""

start:
    docker-compose run --rm react yarn start

add:
    docker-compose run --rm react yarn add $(library)

6. ローカルでサーバを立ち上げる!

以下のようにmake startを実行してください

$ make start 

make startdocker-compose run --rm react yarn startを実行していて、記述をMakefileにて短縮しています。
ローカルでサーバーが立ち上がって、Reactマークがくるくる回っていたら成功です!!

+α 新しくパッケージをインストールしたい時

本当はdocker-compose run --rm react yarn startを実行しています。

# 使用例
$ make add library=redux

さいごに

まだまだ初心者なので、『もっとこうやって作成したら良いよ!』などなどアドバイスをご教授頂けたら、超喜びますm(_ _)m

※ご教授して頂けた方、とても良い感じになりました!ありがとうございます!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む