- 投稿日:2020-07-01T04:30:41+09:00
無料で1日でサービスを開始できる時代。ただ、ユーザーをどう増やすか。
最近、暇で以下のサービスを作った。
https://deau-project.herokuapp.com/3日でサービスを開始した。
こんな感じ。1日目: 何を作るのか。環境はどうするか。
=> メールで出会うサービスで、Heroku, React, Go Gin に決定してデプロイした。
https://devcenter.heroku.com/articles/getting-started-with-go2日目: 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やブログ。
ただ、時間がかかる。やはり、広告しかないのか。
- 投稿日:2020-07-01T01:25:16+09:00
docker-composeを使って、ラクラクReact環境構築!
はじめに
これは『React環境構築の際にイチイチ調べ直すのがめんどくさい』と、自分向けにメモった記事です。
オレオレ記事ですが、ラクラクなので、是非参考にして頂ければと思います。1. GitHubリポジトリを用意
リポジトリを作成してクローンしてきましょう。
$ git clone git@github.com:ユーザ名/リポジトリ.git2. .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
ファイルを作成。dockerfileFROM node:12.17.0 RUN mkdir /build WORKDIR /build4. 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.yml
とMakefile
を作成またアプリのルートディレクトリ下で
docker-compose.yml
とMakefile
を以下のように作成しますdocker-compose.ymlversion: "3.3" services: react: build: ./ working_dir: /code volumes: - ./my-app:/code ports: - 3000:3000 environment: - NODE_ENV=production container_name: tutoriallibrary := "" start: docker-compose run --rm react yarn start add: docker-compose run --rm react yarn add $(library)6. ローカルでサーバを立ち上げる!
以下のように
make start
を実行してください$ make start
make start
はdocker-compose run --rm react yarn start
を実行していて、記述をMakefileにて短縮しています。
ローカルでサーバーが立ち上がって、Reactマークがくるくる回っていたら成功です!!+α 新しくパッケージをインストールしたい時
本当は
docker-compose run --rm react yarn start
を実行しています。# 使用例 $ make add library=reduxさいごに
まだまだ初心者なので、『もっとこうやって作成したら良いよ!』などなどアドバイスをご教授頂けたら、超喜びますm(_ _)m
※ご教授して頂けた方、とても良い感じになりました!ありがとうございます!
- 投稿日:2020-07-01T01:25:16+09:00
DockerでラクラクReact環境構築!
はじめに
これは『React環境構築の際にイチイチ調べ直すのがめんどくさい』と、自分向けにメモった記事です。
オレオレ記事ですが、ラクラクなので、是非参考にして頂ければと思います。1. GitHubリポジトリを用意
リポジトリを作成してクローンしてきましょう。
$ git clone git@github.com:ユーザ名/リポジトリ.git2. .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
ファイルを作成。dockerfileFROM node:12.17.0 RUN mkdir /build WORKDIR /build4. 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.yml
とMakefile
を作成またアプリのルートディレクトリ下で
docker-compose.yml
とMakefile
を以下のように作成しますdocker-compose.ymlversion: "3.3" services: react: build: ./ working_dir: /code volumes: - ./my-app:/code ports: - 3000:3000 environment: - NODE_ENV=production container_name: container_name # ←コンテナ名はご自由に。Makefilelibrary := "" start: docker-compose run --rm react yarn start add: docker-compose run --rm react yarn add $(library)6. ローカルでサーバを立ち上げる!
以下のように
make start
を実行してください$ make start
make start
はdocker-compose run --rm react yarn start
を実行していて、記述をMakefileにて短縮しています。
ローカルでサーバーが立ち上がって、Reactマークがくるくる回っていたら成功です!!+α 新しくパッケージをインストールしたい時
本当は
docker-compose run --rm react yarn start
を実行しています。# 使用例 $ make add library=reduxさいごに
まだまだ初心者なので、『もっとこうやって作成したら良いよ!』などなどアドバイスをご教授頂けたら、超喜びますm(_ _)m
※ご教授して頂けた方、とても良い感じになりました!ありがとうございます!