はなちるのマイノート

Unityをメインとした技術ブログ。自分らしくまったりやっていきたいと思いますー!

【Next.js】Next.jsの公式の入門をやってみた⑩

はじめに

”Deploying a Next.js App”が最後のレッスンになります。
ということで今回が最終回にしたいと思います。

セットアップ

前回の引き続き

構築

package.jsonの中身に追加をしていきます。

before

{
    "scripts": {
        "dev": "node server.js",
        "build": "next build",
        "start": "NODE_ENV=production node server.js"
    },
    "dependencies": {
        "express": "^4.16.4",
        "isomorphic-unfetch": "^3.0.0",
        "next": "^7.0.2",
        "react": "^16.7.0",
        "react-dom": "^16.7.0",
        "react-markdown": "^4.0.6"
    }
}


after

{
    "scripts": {
        "dev": "node server.js",
        "build": "next build",
        "start": "next start"
    },
    "dependencies": {
        "express": "^4.16.4",
        "isomorphic-unfetch": "^3.0.0",
        "next": "^7.0.2",
        "react": "^16.7.0",
        "react-dom": "^16.7.0",
        "react-markdown": "^4.0.6"
    }
}

そして、コマンドプロンプトに次のコードを打ち込みます。

npm run build
npm run start

Now(zeit.co)にデプロイする

今回はNow(zeit.co)を使います。

zeit.co


zeit.co

package.jsonの中身を書き換えます。

"scripts": {
  "build": "next build",
  "start": "next start -p 8000"
}

Nowでデプロイする方法はこちらにまとめてくださってます。

Now でクラウドの複雑さから解放されよう、今すぐに - Qiita

その後、プロジェクトのルートにnow.jsonを作成し、中身を書きます。

f:id:hanaaaaaachiru:20190116195119p:plain

{
  "version": 2,
  "builds": [
    { "src": "package.json", "use": "@now/next" }
  ]
}

コマンドプロンプトに以下のコードを打ち込みます。

npm i -g now

それに使います。続いてこちらを打ち込みます。

now

メールアドレスを求められますので打ち込むと、メールが届くので確認します。

そしてもう一度

now

を打ち込むと、https://~~~のようなものが表示されたと思います。

こちらをChrome等で検索すると、

f:id:hanaaaaaachiru:20190116200507p:plain

無事デプロイできました!

さいごに

長い間お付き合いいただきありがとうございます!
これで無事一通り終わりました。

ただ、実はエクセルという名前のレッスンがまだ残っているのですが、デプロイまでたどり着けたということで終わりにしたいと思います。