LoginSignup
18
12

More than 3 years have passed since last update.

@numasa

TypeScriptのNuxt.jsをDockerに乗せて動かし、Netlifyにデプロイする

Last updated at Posted at 2020-04-27

Nuxt.jsを動かす手順をまとめました。
この記事では、数多あるNuxt.jsを動かす系の記事の中で以下の特徴があります。

  • TypeScript化している
  • ローカル開発環境をDockerで構築している
  • パッケージマネージャにyarnを利用している
  • 最終的にNetlifyにデプロイしている
  • VesionはNuxt.js(v2.12.2)/Node.js(v12.16.1)

今回はUI frameworkとしてVuetify.jsを選択したので、
下の画像のようなNuxt.js + Vuetify.js のデフォルトTOPページがNetlifyのURL(https://[xxx].netlify.app)で表示できるところまでをまとめています。
netlify.app.png

流れ

  1. Dockerfileおよびdocker-compose.ymlの作成
  2. Dockerイメージビルド & Nuxt.jsプロジェクトの作成
  3. Nuxt.jsの各種パッケージの最新化
  4. srcディレクトリの作成
  5. TypeScript化
  6. Netlifyへデプロイ

ディレクトリ構成

最終的なディレクトリ構成およびファイルです。

./[current_directory]
├── README.md
├── docker-compose.yml
├── netlify.toml
├── project               # Nuxt.jsのrootDir(ルートディレクトリ)
│   ├── README.md
│   ├── node_modules      # (ファイルは省略しています)
│   ├── nuxt.config.ts
│   ├── package.json
│   ├── src               # Nuxt.jsのsrcDir(ソースディレクトリ)
│   │   ├── assets        # ここから
│   │   ├── components    # ↓
│   │   ├── layouts       # ↓
│   │   ├── middleware    # ↓  (すべてファイルは省略しています)
│   │   ├── pages         # ↓
│   │   ├── plugins       # ↓
│   │   ├── static        # ↓
│   │   ├── store         # ここまで
│   │   └── vue-shim.d.ts
│   ├── tsconfig.json
│   └── yarn.lock
└── vue                   # Dockerfile格納用
    └── Dockerfile

1. Dockerfileおよびdocker-compose.ymlの作成

current_directory(名前は任意)を作成し、
その中にvueディレクトリおよびDockerfileファイルを作成します。
そしてdocker-compose.ymlファイルを作成します。

vue/Dockerfile
FROM node:12.16.1-alpine

RUN apk update && \
    apk upgrade && \
    yarn global add @vue/cli

ベースイメージとしてnode:12.16.1-alpineを使用しています。
パッケージを最新化し、Vue.js(@vue/cli)を導入します。

docker-compose.yml
version: '3'
services:
  vue:
    build: ./vue
    working_dir: /home/node/app/project
    volumes:
      - ./project:/home/node/app/project
    ports:
      - 3000:3000
    environment:
      - HOST=0.0.0.0

この記事ではservice名vueのコンテナを立てて、projectディレクトリにこの後Nuxt.jsプロジェクトを作成します。

オプション 説明
build 作成したvue/Dockerfile
working_dir 今回は/home/node/app/projectをコンテナ側の作業ディレクトリとしています。
volumes 「ローカル側のNuxt.jsプロジェクト用のprojectディレクトリ」と「コンテナ側の/home/node/app/projectディレクトリ」をマウントしています。
ports 3000番ポート同士をポートフォワーディングしています。
environment 環境変数HOSTを0.0.0.0として定義しlocalhost宛等の自ホスト宛の通信をコンテナに転送するようにしています。

2. Dockerイメージビルド & Nuxt.jsプロジェクトの作成

projectディレクトリを作成し、Nuxt.jsをインストールする。

$ mkdir project
$ cd project
$ docker-compose run vue yarn create nuxt-app .
##### (略) ビルド&create-nuxt-appが実行される ######

create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in project
? Project name: project
? Project description: My finest Nuxt.js project
? Author name: 
? Choose programming language: TypeScript
? Choose the package manager: Yarn
? Choose UI framework: Vuetify.js
? Choose custom server framework: None
? Choose the runtime for TypeScript: @nuxt/typescript-runtime
? Choose Nuxt.js modules: Axios, Progressive Web App (PWA) Support, DotEnv
? Choose linting tools: None
? Choose test framework: None
? Choose rendering mode: Universal (SSR)
? Choose development tools: None

プロジェクト作成時の質問は、上記のように選択しました。
質問の内容等は以下の記事を参考とさせていただきました。

3. Nuxt.jsの各種パッケージの最新化

作成されたプロジェクトのNuxt.jsはv2.0.0なので、npm-check-updatesというパッケージを利用してNuxt.jsを含め各種パッケージを最新化します。
[current_directory]で操作してください。

【 1 】 vueコンテナへ入る

$ docker-compose run vue ash

【 2 】 npm-check-updatesをインストールする

# yarn global add npm-check-updates

【 3 】ncuコマンドが利用可能となるので、ncuをコマンドを実行して各種パッケージの最新バージョンの一覧を表示する

# ncu
Checking /home/node/app/project/package.json
[====================] 7/7 100%

 nuxt                        ^2.0.0  →         ^2.12.2 
 @nuxt/typescript-runtime    ^0.4.0  →          ^0.4.5 
 @nuxtjs/axios               ^5.3.6  →         ^5.10.1 
 @nuxtjs/pwa               ^3.0.0-0  →  ^3.0.0-beta.20 
 @nuxtjs/dotenv              ^1.4.0  →          ^1.4.1 
 @nuxt/typescript-build      ^0.6.0  →          ^0.6.5 
 @nuxtjs/vuetify             ^1.0.0  →         ^1.11.0 

Run ncu -u to upgrade package.json

【 4 】各種パッケージの最新バージョンでpackage.jsonを書き換える

# ncu -u
Upgrading /home/node/app/project/package.json
[====================] 7/7 100%

 nuxt                        ^2.0.0  →         ^2.12.2 
 @nuxt/typescript-runtime    ^0.4.0  →          ^0.4.5 
 @nuxtjs/axios               ^5.3.6  →         ^5.10.1 
 @nuxtjs/pwa               ^3.0.0-0  →  ^3.0.0-beta.20 
 @nuxtjs/dotenv              ^1.4.0  →          ^1.4.1 
 @nuxt/typescript-build      ^0.6.0  →          ^0.6.5 
 @nuxtjs/vuetify             ^1.0.0  →         ^1.11.0 

Run npm install to install new versions.

【 5 】依存関係を削除したうえで、インストールする

# rm yarn.lock
# rm -r node_modules
# yarn install

npm-check-updatesの使い方は、以下のサイトを参考にさせていただきました。

npm-check-updatesを使ってnpmライブラリのアップデートを確認する方法

※ここまでで一旦ローカル環境で動作可能です。
$ docker-compose run --service-ports vue yarn dev
# http://localhost:3000 でデフォルトページが確認できます。

4. srcディレクトリの作成

この手順の実施は任意ですが、ディレクトリ構造が複雑化しないようにsrcディレクトリを作成してソースファイルを移動しています。

$ mkdir src
$ mv assets components layouts pages plugins static store middleware src/

そしてnuxt.cofig.jsにsrcDirプロパティを追記します。

nuxt.cofig.js
module.exports = {
  mode: 'universal',
  srcDir: 'src/',     // 追記!!
  ---(略)---
}

5. TypeScript化

ここからは、作成したNuxt.jsプロジェクトをTypeScript化していきます。
まずは、新しくvue-shim.d.tsというファイルを作成します。

$ touch src/vue-shim.d.ts
$ vi src/vue-shim.d.ts

作成することで.vueファイルの型がTypeScriptのコンパイラによって拾われるようになります。
内容は下記の通り記載します。(詳細は公式ページ参照)

vue-shim.d.ts
declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

nuxt.config.jsをnuxt.config.tsに変更し、内容を下記の通り追記および変更をします。

nuxt.cofig.ts
import colors from 'vuetify/es5/util/colors'
import { Configuration } from '@nuxt/types' // 追記!!

const config: Configuration = {             // 変更!!
  mode: 'universal',
  ---(略)---
}
export default config                       // 追記!!

TypeScript化は、以下の記事を参考にさせていただきました。

Nuxt.js TypeScript - 実践TypeScript アップデート -

ローカルホストへ--service-ports(3000番ポート)を開きつつDockerで起動します。

$ docker-compose run --service-ports vue yarn dev
# http://localhost:3000 でデフォルトページが確認できます。

6. Netlifyへデプロイ

Netlifyへデプロイしていきます。

【事前準備】netlify.tomlを作成し、GitHubへ登録する

netlify.tomlをリポジトリのルートに配置することで、Netlifyのビルド設定、デプロイ設定、環境変数などをファイルベースで設定できます。(詳細は公式ページ参照)

netlify.toml
[build]
  base = "/project"
[build.environment]
  YARN_VERSION = "1.22.0"
  YARN_FLAGS = "--no-ignore-optional"
  NODE_VERSION = "12.16.1"
変数名 説明
base package.jsonの配置されているディレクトリを指定(デフォルトではルートディレクトリ)
YARN_VERSION yarnのバージョン(デフォルトでnpmはあるがyarnはインストールされていない、指定することでインストールされる)
YARN_FLAGS yarn installにつけるオプション(デフォルトで依存関係をインストールしない--ignore-optionalとなっているので、--no-ignore-optionalを指定)
NODE_VERSION node.jsのバージョン(デフォルトではv10であるため)

[build.environment]の詳細は公式ページ参照

その後、GitHubなどにリポジトリを作成し[current_directory]をリポジトリ登録してください。(この記事ではGitHubを利用)
github.com_nuxt_ssr_typescript_on_docker.png

【 1 】Netlifyへアクセスし、ログインをする

https://app.netlify.com/
www.netlify.com_.png

【 2 】Sitesページで「New site from Git」を押下し、登録したリポジトリを選択します。

app.netlify.com_teams_numasa.png
app.netlify.com_teams_numasa_create_site_.png
app.netlify.com_teams_numasa_pick_repository.png

【 3 】デプロイ設定をして、デプロイする

Branch to deploy(デプロイ対象のブランチ)にmasterを選択し、
Build commandにyarn generate、Publish directoryにdistを入力して「Deploy site」を押下します。
app.netlify.com_teams_numasa_deploy.png
しばらくすると「Deploys」タブでデプロイがPublishedとなり、URLが払い出されています。
app.netlify.com_sites_clever-snyder_deploy.png

【 4 】デプロイ完了

払い出されたURLにアクセスし、Nuxt.js + Vuetify.js のデフォルトTOPページが表示されます。
netlify.app.png
以下の記事を参考にさせていただきました。

Nuxt.js + Netlifyで爆速構築するサーバーレス開発入門

参考リンク

記事中にも記載していますが、参考にさせていただいたリンクです。

18
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
18
12