今の現場がフロントにVue.jsを採用しているので、勉強も兼ねて作り始める事にしました。
今回は本番を想定して、ローカルのNginxで動かしてみる所までにします。

プロジェクト作成

選択肢が多いので悩む所もありますが、公式の手順通りで行けます。
インストール – NuxtJS

nuxt-app-originの所は、作るアプリに合わせて変更
% yarn create nuxt-app nuxt-app-origin
? Project name: (nuxt-app-origin) 

デフォルトのJavaScriptからTypeScriptに変更
? Programming language: (Use arrow keys)
  JavaScript 
❯ TypeScript 

デフォルトのYarnのまま
? Package manager: (Use arrow keys)
❯ Yarn 
  Npm 

デフォルトのNoneからVuetify.jsに変更
? UI framework: (Use arrow keys)
  None 
  Ant Design Vue 
  BalmUI 
  Bootstrap Vue 
  Buefy 
  Chakra UI 
  Element 
  Framevuerk 
  Oruga 
  Tachyons 
  Tailwind CSS 
  Windi CSS 
  Vant 
  View UI 
  Vuesax 
❯ Vuetify.js 

デフォルトなしからAxiosとPWAを選択
※記載されているようにスペースを押さないと選択されない。IMEがONだと選択されないので注意
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Axios - Promise based HTTP client
❯◉ Progressive Web App (PWA)
 ◯ Content - Git-based headless CMS

デフォルトなしからESLintを選択
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint
 ◯ Commitlint

デフォルトのNoneからJestに変更
? Testing framework: (Use arrow keys)
  None 
❯ Jest 
  AVA 
  WebdriverIO 
  Nightwatch 

S3+CloudFrontとかで、静的ホスティングしたいので、
デフォルトのUniversalからSingle Page App(SPA)に変更
? Rendering mode: (Use arrow keys)
  Universal (SSR / SSG) 
❯ Single Page App 

デフォルトのServerからStaticに変更
? Deployment target: (Use arrow keys)
  Server (Node.js hosting) 
❯ Static (Static/Jamstack hosting) 

デフォルトなしからjsconfig.jsonを選択
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ jsconfig.json (Recommended for VS Code if you're not using typescript)
 ◯ Semantic Pull Requests
 ◯ Dependabot (For auto-updating dependencies, GitHub only)

いずれ使いたいが、今はNoneを選択
? Continuous integration: (Use arrow keys)
❯ None 
  GitHub Actions (GitHub only) 
  Travis CI 
  CircleCI 

デフォルトのGitのまま
? Version control system: (Use arrow keys)
❯ Git 
  None 
🎉  Successfully created project nuxt-app-origin

  To get started:

	cd nuxt-app-origin
	yarn dev

  To build & start for production:

	cd nuxt-app-origin
	yarn build
	yarn start

  To test:

	cd nuxt-app-origin
	yarn test


  For TypeScript users. 

  See : https://typescript.nuxtjs.org/cookbook/components/

動かしてみる

% cd nuxt-app-origin
% yarn dev

ブラウザから下記で見れます。
http://localhost:3000/

テストを動かしてみる

% yarn test
-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------|---------|----------|---------|---------|-------------------
All files  |       0 |      100 |     100 |       0 |                   
 index.vue |       0 |      100 |     100 |       0 | 80-81             
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.298 s
Ran all test suites.
✨  Done in 2.01s.

静的コード解析を動かしてみる

% yarn lint
$ yarn lint:js
$ eslint --ext ".js,.vue" --ignore-path .gitignore .
✨  Done in 2.49s.

無いけど、自動補正

% yarn lint --fix
$ yarn lint:js --fix
$ eslint --ext ".js,.vue" --ignore-path .gitignore . --fix
✨  Done in 1.66s.

ビルドして動かしてみる

% yarn build
% yarn start
 FATAL  Output directory dist/ does not exist, please use nuxt generate before nuxt start for static target. 

generateが必要でした。
% yarn generate
% yarn start

ブラウザから下記で見れます。
http://localhost:3000/

でも、今回は静的ホスティングしたいので、yarn buildとstartは不要でした。
(yarn startはリリース前に動作確認する時に役立つとの事)
yarn generateで、distディレクトリに出力されます。

Nginxで動かしてみる

HomeBrewでNginxがインストールされていて、NameVirtualで動いている前提で書きます。
hostsを設定したくないので、xip.ioのお力を借りちゃいます。
追伸:xip.ioが落ちてるっぽいので、nip.ioに変更

% vi /opt/homebrew/etc/nginx/servers/nuxt.127.0.0.1.nip.io.conf
server {
    listen       80;
    server_name  nuxt.127.0.0.1.nip.io

    location ~ /\.(ht|git|svn|cvs) {
        deny all;
    }

    location / {
        root    /アプリのパス/nuxt-app-origin/dist;
        index   index.html;
    }
}
% nginx -t -c /opt/homebrew/etc/nginx/nginx.conf
nginx: the configuration file /opt/homebrew/etc/nginx/nginx.conf syntax is ok
nginx: configuration file /opt/homebrew/etc/nginx/nginx.conf test is successful

% brew services restart nginx

ブラウザから下記で見れます。
http://nuxt.127.0.0.1.nip.io/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です