More than 1 year has passed since last update.

docker+next.jsで環境構築

Posted at 2022-07-23

はじめに

今回はreactを触ってみたいと思い、知人に相談してみたら、

じゃあ、今はnext.js × vercelが主流だからreact飛ばそっか！と言われ、

「なるほど、確かにな！」と鵜呑みにしたので、next.jsから取り組んでいく流れとなりました。

軽く自己紹介として、自分は1年半ほどrails、nuxt.jsなどに取り組んでいました。その間プー太郎をしてまして、今年４月にSEとして今の会社に入社しました。現在はCodeIgniterを扱っており、モダンな技術への憧れが日々強くなっております！笑

今回紹介する内容は

「docker＋next.jsで環境構築を行う。」という擦りまくった内容となります。

この記事の主な対象者

とりあえず、docker+next.jsを立ち上げたい人
環境構築周りに時間をかけたくない人

この記事の目標

next.jsを触れる環境を簡易的に作る。

Dockerfile

FROM node:16.13.2
WORKDIR /usr/src/app

USER node

docker-compose.yml

version: '3'
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./:/usr/src/app
    command: sh -c "cd sample-app && npm run dev"
    ports:
      - "3000:3000"

command

docker-compose run --rm app npx create-next-app sample-app

(もしアプリがないと言われたら、このコマンドを打つ)
docker-compose run --rm app npm install create-next-app

ハマった時に全てを消し去る呪文
docker-compose down --rmi all --volumes --remove-orphans

起動コマンド
docker-compose up

使用したものや参考にしたサイト

最後に

いかがだったでしょうか。

今回は初回というのもあり、軽い内容ではありましたが、

少しずつ皆様に役立つ記事を書いていければと思います。

次回は、vercelデプロイ、画面遷移、api連携周りを記事にしたいと思います。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up