Vercel+Nuxt.jsで爆速Webアプリ作成

CodeSandboxとNowでアプリを作る話の続き。(読んでなくてもイケる)
create-nuxt-app で作ったNuxt.jsアプリをVercelでデプロイする話です。

いつの間にやらZEITは新たなるブランドVercelに生まれ変わったそうで、NowもVercelという名称に変わってました🙄
よってこれからはNowとは言わずVercelと呼ぶことにします。

最近刀剣乱舞(ゲームの方)に復帰したんですけど、
イラスト回収状況がゲーム内で分からなすぎたのでメモ帳を作りました。

この時点はCodesandboxでVueテンプレートから作ってました。

周回しながら捏ねてたらイメージが固まったので、このままデプロイしてもよかったんだけど、ローカルで作り込みたかったのでNuxt.jsに移植した。
それをVercelでデプロイしたのがこちら

状況の算出とかはふいんきでやっつけたから間違ってるかもしれない🤔

手順

ここから本題 🤗

  1. Nuxt.jsプロジェクト作成
  2. @nuxt/now-builder インストール
  3. Vercel デプロイ

Nuxt.js プロジェクト作成

まず create-nuxt-app とかでNuxt.jsのプロジェクトを作成する。
公式ドキュメント通りにやればつつがなく終わるはず。

インストールが終わったらプロジェクトのディレクトリに移動して、
dev起動できるか一応確認しておく。localhost:3000で表示されればおk。

@nuxt/now-builder インストール

npmないしyarnでインストールするだけです

yarn add @nuxt/now-builder --dev

インストールしたら、vercel.jsonを作成する。

{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/now-builder",
      "config": {
        "serverFiles": ["middleware/**"]
      }
    }
  ],
  "env": {
  }
}

useのところにモジュールを設定する。nuxt.config.js には何もしません。

Vercelでデプロイ

Vercel CLIを使うか、Git integrations を使うかで多少手順が変わる。

Vercel Git Integrations

  1. Gitにリポジトリを publish
  2. Gitの設定>Applications>Vercel>Repository access でリポジトリを選択
    (All repositoriesにチェック入れてる場合は不要)
  3. VercelのダッシュボードにあるImport Projectボタンをクリック
  4. From Git Repository の Continueボタンをクリック
  5. Import Project from GitHubボタンをクリック
  6. リポジトリを選択してIMPORTボタンをクリック

Vercel CLI

以下コマンドラインでの操作です

1. プロジェクトのルートで vercel を実行

$ vercel

2. 質問に答える

3. デプロイが終わるのを待つ

完了するとURLが表示されるのでアクセスして確認する。
エラーが出た場合はvercel logコマンドでログファイルを表示するか、
ダッシュボードのView Build Logsからログ画面を表示して確認する。

vercelコマンドだけではdevelopmentビルドになるので、
productionビルドは –prodオプションを付けてコマンドを実行する。

vercel --prod

Git Integrationの設定をしておけば、pushする都度ビルドが走るようになる。

Ant Design Vue + Nuxt.js

簡単すぎて書くことが少なかったので今回使ったAnt Design Vueについてのメモを。

使ってみたことがあるVueのUIライブラリの感想はこんな感じ。

Vue UICSS感想
Bootstrap VueBootstrapSCSS
一般的なサイト向け
カスタムしやすい
BuefyBulmaSCSS
BootstrapVueに比べると発展途上
カスタムしやすい
Ant Design VueAnt DesignLess
管理画面やツール向け
React版に比べると発展途上

Bootstrap自体に馴染みが深いので私はBootstrap Vueが一番使用頻度高いんだけども、管理画面やツール的なWebアプリで使えるコンポーネントに関してはAnt Design Vueの方が上だなと思った。Vue版はReact版に比べるとまだコンポーネントが出揃ってないみたいなんだけど、それでもこんなコンポーネントもあるのか!という驚きがあったので今後も使っていきたいなと思いました。
ライブラリで採用されているのがLessなのが残念なところかなあ。(Sassの方が慣れてるから)
Buefyはコンポーネントが関数化されてなかったりコンポーネントが少なかったりしてて発展途上な雰囲気があったのであんまり使ってないけど、Bulmaが好きならありだと思う。

テーマのカスタム

nuxt.config.js のCSSにカスタム用のcommon.lessファイル設定追加
(ファイル名は何でもいい)

/*
 ** Global CSS
 */
css: [
  { src: '@/assets/css/common.less', lang: 'less' }
]

common.lessファイルを作成して、ant-design-vueのantd.lessファイルをimportする。

@import 'ant-design-vue/dist/antd.less';

これはmarginを設定するクラスを生成するやつ。

@spacerSizes: {
  1: @padding-xs;
  2: @padding-sm;
  3: @padding-md;
  4: @padding-lg;
}
@spacerPositions: {
  t: top;
  r: right;
  b: bottom;
  l: left;
};

each(@spacerSizes, {
  .m@{key} {
    margin: @value;
  }

  each(@spacerPositions, .(@v, @k, @i) {
    .m@{key}@{k} {
      margin-@{v}: @value;
    }
  });
})

each(@spacerPositions, {
  .m0@{key} {
    margin-@{value}: 0;
  }
});

.m0 {
  margin: 0;
}

nuxt.config.js のBuildセクションに設定追加

/*
 ** Build configuration
 */
build: {
  /*
   ** webpack config
   */
  extend(config, { loaders: { less } }) {
    less.lessOptions = {
      javascriptEnabled: true,
      modifyVars: {
        'font-family': `-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`,
        'page-header-padding': 0
      }
    }
  },
  babel: {
    plugins: [
      ['import', { libraryName: 'ant-design-vue' }, 'ant-design-vue']
    ]
  }
}

Ant Design はデフォルトが中国語フォントなので、LessのmodifyVarsで変更してます。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください