More than 5 years have passed since last update.

Jamstack　Docker + Nuxt + Contentful + Vuetify + Netfliyでポートフォリオ作成①

Posted at 2020-04-01

やりたいこと

Nuxtでフロントを作成
Dockerで環境構築
Contentfulでポートフォリオ情報の取得
Vuetifyで見た目整形
Netfliyで公開

前提

・Nuxt環境
　参考：https://blog.cloud-acct.com/posts/blog-nuxtjs-settings/

・Docker環境
　参考：https://qiita.com/kurkuru/items/127fa99ef5b2f0288b81

それでは行ってみよう！

Nuxtでフロントを作成

npx create-nuxt-app my_portfolio
✨  Generating Nuxt.js project in my_portfolio
? Project name my_portfolio
? Project description My kryptonian Nuxt.js project
? Author name Naoya Moriguchi
? Choose programming language TypeScript
? Choose the package manager Npm
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose the runtime for TypeScript @nuxt/typescript-runtime
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support, DotEnv
? Choose linting tools ESLint
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)

Dockerで環境構築

# Dockerfile
FROM node:12
ENV HOST 0.0.0.0
COPY . /app
WORKDIR /app

今回はnode12に設定

# docker-compose.yml
version: '3'

services:
  nuxt:
    build:
      context: ./
    container_name: node12_portfolio
    volumes:
      - ./:/app
    ports:
      - "3000:3000"
    command: bash -c "npm install && npm run dev"

はい。これで、