この記事を読んだあなたは、
たったの15分で！
フロントエンドとバックエンドからなるwebアプリを作り
それを永久無料でデプロイし
CDの設定までできるようになります
まえがき
個人開発歴は半年程度しかない僕ですが、今日まで挫折しながらいくつかの方法を試してきました。
そんな僕が、今最もオススメな、挫折しない個人開発の始め方を紹介します。
ステップ1：nodeのインストール
nodeが入ればなんでもいいです。以下ではnodenvを使った方法を説明します。
nodenvはディレクトリごとにnodeのバージョンを切り替えられるのが利点です。
僕のように仕事でもnodeを使う人には特にオススメできます。
-
nodeの好きなバージョンをインストールします
- 使いたいライブラリが最新版に対応していないなどの特殊な理由がなければ、最新版を選択するのがいいでしょう
# インストール可能なバージョンの一覧を見る nodenv install -l # 特定のバージョンのnodeをインストール nodenv install 13.11.0 -
適当なディレクトリを作成します
mkdir node-dev cd node-dev -
nodeのバージョンを指定
nodenv local 13.11.0 # nodenv install したバージョンしか指定できないので注意 # これでこのディレクトリではnodev13.11.0が使われるようになりました
linux (wsl)だとコレがラクそう
https://qiita.com/seibe/items/36cef7df85fe2cefa3ea
ステップ2：next.jsプロジェクトを新規作成
-
next.jsプロジェクトをつくる
npm init next-app # プロジェクト名など、少しの質問に答えていきます -
noxt.jsプロジェクトをローカルで確認する
- 以下コマンドを入力すると、devサーバーが立ち上がるので、ブラウザで
http://localhost:3000にアクセスしてみてください
cd your-project-name npm run dev - 以下コマンドを入力すると、devサーバーが立ち上がるので、ブラウザで
ステップ3：コードをちょっと変更してみる
-
your-project-name/pages/index.jsのコードをテキトーに変更して、保存してみましょう
おめでとうございます！今ここに、世界に一つだけのnext.jsプロジェクトが爆誕しました。
ステップ4：githubリポジトリにnext.jsプロジェクトをpushする
-
github(gitlabでも可)のページ上で新しいリポジトリを作成する
-
add&commit して作成したリポジトリにpushする
git add . git commit -m "launch" git remote add origin git@github.com:XXXXXXXXXX/xxxxxxxxxx.git git push -u origin HEAD
ステップ5：vercelでデプロイする
-
vercelにサインアップ
- Continue with GitHub (GitLab)でサインアップする
- 先ほど作成したgithubリポジトリと接続する
-
From Git Repositoryを選択 -
Import Project from GitHubから 先ほどのリポジトリを選択 - あとは次へ連打でOK
-
なんとこれでデプロイ完了！今ここに、世界に一つだけのwebアプリが爆誕しました。
- 少し待つと、ビルドが終了し、世界に向けてwebアプリが公開されます。右上にあるvisitボタンをクリックして見に行ってみましょう。当然、スマホからでも見られます。
- vercelのすごいところは、CD(Continuous Deployment)の設定も自動でやってくれることです。
- そのほかにも、pull requestをつくると、自動で動作確認環境を作ってくれたりもします。
- さらに、最も驚くべきが価格、なんとこれ、永久無料です！！！
Vercelは別にnext.js専用のプラットフォームではないです。
HTML＋CSS＋JSで作ったアプリとか、create-react-appで作ったアプリとか、Gatsbyで作ったアプリとかなら、なんでも動きます。
ただ、Vercelとnext.jsは作っている会社が一緒なので、相性が良いです。
さらに、next.jsはバックエンドAPIも同一のプロジェクト内に定義できるので、フロントエンドもバックエンドもまとめてVercelでデプロイできるのが良いです。
CDの良さを体感できる動画
-
コード変更 → git push → 40秒待つ → 本番環境に自動デプロイの様子 - コードを変更してそれがすぐにデプロイされるのをみると、モチベが落ちにくいです。このスピード感がキモなのです。
おまけ：このあとどうすれば良い？
- 何か作りたいものを作ってみましょう。それが一番学べるんじゃないかなと僕は思っています。
- 作りたいものが見つからない人は定番の、カウンターやtodoリストを作ってみましょう。
- Reactって何？って人は公式のチュートリアルを参考に、your-project-name/pages/index.jsを書き換えていくと、Reactがわかってくるかもしれません。
- next.jsの公式のチュートリアルもわかりやすかったです。
- いい感じの見た目にならなくて困っている方は、Material UIなどのライブラリを使用することをオススメします。
- DBを使うwebアプリを作りたい場合は、RDSやCloud Firestoreなどを使うと良いかもしれません。
- 実は僕も模索中なので、安くて使いやすいDBサービスあったら教えてください。
質問あったらコメントください。
不適切な表現があったら教えてください。