今の現場がフロントに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/
追記：WARN対応
起動すると下記のWARNが出ます。
% yarn dev
WARN Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-methods", { "loose": true }]
to the "plugins" section of your Babel config.
メッセージにあるように、nuxt.config.jsに下記を追加すればOK
build: {
babel: {
plugins: [
['@babel/plugin-proposal-private-methods', { loose: true }]
]
}
}
“Nuxt.jsでVue.jsに触れてみる” に対して4件のコメントがあります。