Next.jsを勉強してみる その① 〜何も考えず環境構築編〜

まいどです。LIGにジョインして5ヶ月経ちますが、コーディングしたステップ数はまだ100行に満たないバックエンドエンジニアのやなさんです。

とはいえ、私もエンジニア。現在の案件で採用されているNext.jsを勉強するため、勉強用の開発環境を構築することにしてみました。

Next.jsとは

Zeit社が開発したユニバーサルなReactアプリの開発が可能なフレームワーク。よく比較されるフレームワークでいくとVue.jsを使って開発されたNuxt.jsなどがある。

今回はDockerを使って何も考えず、爆速（気分）で開発環境を構築してみようと思います。

とりあえず、立ち上げるまで頑張ってみる

next.jsインストール

# ルートディレクトリにsrcフォルダを作成・移動
mkdir src && cd src
# Next.jsのアプリケーションの雛形を作成
$ npx create-next-app

このコマンドを実行すると……

What is your project named?

と聞かれるため、好きな名前を入力してください（今回はapp）。

src/app配下にできたpackage.jsonの……

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },

の部分に、以下のようにポート指定を追加します。

"scripts": {
    "dev": "next dev -p 80",
    "build": "next build",
    "start": "next start"
  },

Docker関連のファイルを作成（コピー）

ルートディレクトリに戻り、Docker環境を構築するために必要な各種ファイルを作成します。

無心になって/docker-compose.ymlファイルに以下内容をコピー

version: '3'
services:
  app:
    build:
      context: .
      dockerfile: ./docker/app/Dockerfile
    ports:
      - "80:80"
    environment:
      - NODE_ENV=development
    volumes:
      - ./src/app:/code

  web:
    image: nginx:1.17.3-alpine
    ports:
      - "8081:8081"
    depends_on:
      - php
    volumes:
      - ./docker/web/default.conf:/etc/nginx/conf.d/default.conf
      - ./src/web:/var/www/html

  php:
    image: php:7.1.9-fpm-alpine
    volumes:
      - ./src/web:/var/www/html

次にルートディレクトリで以下フォルダを作成

mkdir -p docker/app && mkdir docker/web

/docker/app/Dockerfileを作成し以下内容をコピー

FROM node:10

WORKDIR /code
EXPOSE 80
CMD npm run dev

/docker/web/default.confを作成し以下内容をコピー

server {
    listen 8081;
    server_name _;
    root  /var/www/html;
    index index.php;

    access_log /var/log/nginx/access.log;
    error_log  /var/log/nginx/error.log;

    location / {
        try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
        fastcgi_split_path_info ^(.+\.php)(\.+)$;
        fastcgi_pass php:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
}

上記手順を進めることで、ルートディレクトリ配下が以下のようなフォルダ構成となっていれば問題なしです。

/
├ docker
│ ├ app
│ │ └ Dockerfile
│ └ web
│   └ default.conf
├ src
│ └ app   # next.js をインストールしたフォルダ
└ docker-compose.yml

Dockerを立ち上げる

準備ができたらルートディレクトリで以下コマンドを実行。

$ docker-compose up

next.jsの動作確認

実行完了後、「http://localhost」を立ち上げたときに、以下の画面が出ればOKです。

ついでに

上記状態のまま「http://localhost:8081」を立ち上げると、nginxの以下画面が表示されると思います。

本来の開発ではnext.jsアプリケーションのみで作成が完結することはなく、別のWebアプリケーションサーバに接続してデータ取得して画面描画することが一般的だと思います。

次回はこの環境を使って、Webアプリケーションサーバからデータを取得して画面表示する機能を作成してみたいと思います。

それではまた。やなさんでした。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。