refirio.org

{ "name": "first-app", "scripts": { "dev": "nuxt" } }

>cd C:\localhost\home\refirio_org\public_html\memos\nuxtjs\first >npm install -save nuxt >npm run dev ───────────────────────────────────────────── │ │ │ Nuxt.js v2.12.2 │ │ Running in development mode (universal) │ │ │ │ Listening on: http://localhost:3000/ │ │ │ ───────────────────────────────────────────── i Preparing project for development 15:18:16 i Initial build may take a while 15:18:16 WARN No pages directory found in C:\localhost\home\refirio_org\public_html\memos\nuxtjs\first. Using the default built-in page. √ Builder initialized 15:18:17 √ Nuxt files generated 15:18:17 √ Client Compiled successfully in 7.99s √ Server Compiled successfully in 6.95s i Waiting for file changes 15:18:26 i Memory usage: 192 MB (RSS: 252 MB) 15:18:26 i Listening on: http://localhost:3000/ 15:18:26

<template> <div> <h1>Hello!</h1> <p>This is Next.js sample page.</p> </div> </template>

>cd C:\localhost\home\refirio_org\public_html\memos\nuxtjs >npx create-nuxt-app test_project create-nuxt-app v2.15.0 Generating Nuxt.js project in test_project Project name test_project Project description My dazzling Nuxt.js project Author name refirio Choose programming language JavaScript Choose the package manager Npm … yarn から Npm に変更した。 Choose UI framework None Choose custom server framework None (Recommended) Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection) Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection) Choose test framework None Choose rendering mode Universal (SSR) Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection) >cd test_project >npm run dev ───────────────────────────────────────────── │ │ │ Nuxt.js v2.12.2 │ │ Running in development mode (universal) │ │ │ │ Listening on: http://localhost:3000/ │ │ │ ───────────────────────────────────────────── i Preparing project for development 16:22:24 i Initial build may take a while 16:22:24 √ Builder initialized 16:22:24 √ Nuxt files generated 16:22:24 √ Client Compiled successfully in 8.33s √ Server Compiled successfully in 7.27s i Waiting for file changes 16:22:34 i Memory usage: 196 MB (RSS: 253 MB) 16:22:34 i Listening on: http://localhost:3000/ 16:22:34

- Installing packages with yarnTrace: Error: spawn yarn ENOENT at notFoundError (C:\Users\refirio\AppData\Roaming\npm-cache\_npx\12656\node_modules\create-nuxt-app\node_modules\sao\node_modules\cross-spawn\lib\enoent.js:6:26) at verifyENOENT (C:\Users\refirio\AppData\Roaming\npm-cache\_npx\12656\node_modules\create-nuxt-app\node_modules\sao\node_modules\cross-spawn\lib\enoent.js:40:16) at ChildProcess.cp.emit (C:\Users\refirio\AppData\Roaming\npm-cache\_npx\12656\node_modules\create-nuxt-app\node_modules\sao\node_modules\cross-spawn\lib\enoent.js:27:25) at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12) { code: 'ENOENT', errno: 'ENOENT', syscall: 'spawn yarn', path: 'yarn', spawnargs: [ 'install' ] } at C:\Users\refirio\AppData\Roaming\npm-cache\_npx\12656\node_modules\create-nuxt-app\cli.js:46:17 at processTicksAndRejections (internal/process/task_queues.js:97:5)

<template> <section class="container"> <h1>{{ title }}</h1> <p>{{ message }}</p> <hr> <pre>{{ now }}</pre> </section> </template> <script> export default { data: function() { return { title: 'Hello', message: 'This is a message', now: 'wait...' }; }, created: function() { setInterval(() => { var d = new Date(); this.now = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds(); }, 1000) } } </script> <style> .container { padding: 5px 10px; } h1 { color: #345980; } pre { padding: 10px; background-color: #efefef; } hr { margin: 10px 0; } </style>

<router-link to="/other">Go to Other</router-link>

<template> <section class="container"> <h1>{{ title }}</h1> <p>{{ message }}</p> <hr> <router-link to="/">Go to Top</router-link> </section> </template> <script> export default { data: function() { return { title: 'Hello', message: 'これは別のページです。' }; } } </script> <style> .container { padding: 5px 10px; } h1 { color: #345980; } hr { margin: 10px 0; } </style>

<router-link to="/test/test1/test2/test3">Go to Other</router-link>

<template> <section class="container"> <h1>{{ title }}</h1> <p>{{ message }}</p> <hr> <router-link to="/">Go to Top</router-link> </section> </template> <script> export default { data: function() { return { title: 'Hello' }; }, computed: { message: function() { let x = this.$route.params.x; let y = this.$route.params.y; let z = this.$route.params.z; return 'x=' + x + ', y=' + y + ', z=' + z; } } } </script> <style> .container { padding: 5px 10px; } h1 { color: #345980; } hr { margin: 10px 0; } </style>

import Vuex from 'vuex' const createStore = () => { return new Vuex.Store({ state: function() { return { message: 'これはストアメッセージです。', }; } }) } export default createStore

<p>{{ $store.state.message }}</p>

import Vuex from 'vuex' const createStore = () => { return new Vuex.Store({ state: function() { return { message: '数値をカウントします。', counter: 0, }; }, mutations: { count: function(state) { state.counter++; }, reset: function(state) { state.counter = 0; } } }) } export default createStore

<template> <section class="container"> <h1>{{ title }}</h1> <p>{{ message }}</p> <p>{{ $store.state.message }}</p> <hr> <div class="counter" @click="$store.commit('count')" @click.ctrl="$store.commit('reset')" > clicked: {{ $store.state.counter }} </div> </section> </template> <script> export default { data: function() { return { title: 'Hello', message: 'This is a message' }; }, } </script> <style> .container { padding: 5px 10px; } h1 { color: #345980; } div.counter { padding: 10px; background-color: #efefef; } hr { margin: 10px 0; } </style>

>cd C:\localhost\home\refirio_org\public_html\memos\nuxtjs\test_project >npm install --save axios >npm run dev

<router-link to="/axios">Go to Axios</router-link>

<template> <section class="container"> <h1>{{ title }}</h1> <p>{{ message }}</p> <pre>{{ result_data }}</pre> <router-link to="/">Go to Top</router-link> </section> </template> <script> const axios = require('axios'); let url = '/README.md'; //let url = 'http://refirio.org/page/about'; export default { data: function() { return { title: 'Hello', message: 'これはデータ取得のテストです。' }; }, asyncData: async function() { let result = await axios.get(url); return { result_data: result.data }; }, } </script> <style> .container { padding: 5px 10px; } h1 { color: #345980; } pre { padding: 10px; background-color: #efefef; } hr { margin: 10px 0; } </style>

>cd C:\localhost\home\refirio_org\public_html\memos\nuxtjs >npx create-nuxt-app express create-nuxt-app v2.15.0 Generating Nuxt.js project in express Project name express Project description My astonishing Nuxt.js project Author name refirio Choose programming language JavaScript Choose the package manager Npm … yarn から Npm に変更した。 Choose UI framework None Choose custom server framework Express … None から Express に変更した。 Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection) Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection) Choose test framework None Choose rendering mode Universal (SSR) Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection) >cd express >npm run dev [nodemon] 1.19.4 [nodemon] to restart at any time, enter `rs` [nodemon] watching dir(s): server\**\* [nodemon] watching extensions: js,mjs,json [nodemon] starting `node server/index.js` i Preparing project for development 00:11:05 i Initial build may take a while 00:11:05 √ Builder initialized 00:11:05 √ Nuxt files generated 00:11:05 √ Client Compiled successfully in 7.50s √ Server Compiled successfully in 8.05s i Waiting for file changes 00:11:15 READY Server listening on http://localhost:3000 00:11:15

const express = require('express') const router = express.Router() router.get('/test', (req, res, next) => { const param = { test: 'success' } res.header('Content-Type', 'application/json; charset=utf-8') res.send(param) }) module.exports = router

const express = require('express') const consola = require('consola') const { Nuxt, Builder } = require('nuxt') const app = express() const apiRouter = require('./api') … 追加。 // Import and Set Nuxt.js options const config = require('../nuxt.config.js') config.dev = process.env.NODE_ENV !== 'production' async function start () { // Set api route app.use('/api', apiRouter) … 追加。 // Init Nuxt.js const nuxt = new Nuxt(config)

>npm install --save @nuxtjs/axios

}, modules: [ '@nuxtjs/axios', ], axios: { } }

<h2 class="subtitle"> My astonishing Nuxt.js project </h2> <p>API response: {{ response }}</p> }, data: function() { return { response: null } }, mounted: function() { this.$axios .$get('/api/test') .then(response => { this.response = response.test }) .catch(error => { console.log(error) }) } }

>npm run dev

$ sudo su - # python --version Python 2.7.5 # yum -y install epel-release # yum -y install ansible # ansible --version ansible 2.9.7 # vi /etc/ansible/hosts # exit $ cd /var/www/ansible $ ansible-playbook site.yml --connection=local

$ curl --silent --location https://rpm.nodesource.com/setup_12.x | sudo bash - $ sudo yum install -y nodejs $ node --version v12.16.3 $ npm --version 6.14.4 $ sudo npm install -g @vue/cli $ vue --version @vue/cli 4.3.1 $ cd $ npx create-nuxt-app my-project create-nuxt-app v2.15.0 Generating Nuxt.js project in my-project Project name my-project Project description My splendiferous Nuxt.js project Author name Choose programming language JavaScript Choose the package manager Npm Choose UI framework None Choose custom server framework Express Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection) Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection) Choose test framework None Choose rendering mode Universal (SSR) Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection) $ cd my-project $ npm run dev

npm ERR! code EPROTO npm ERR! syscall symlink npm ERR! path ../@babel/parser/bin/babel-parser.js npm ERR! dest /var/www/my-project/node_modules/.bin/parser npm ERR! errno -71 npm ERR! EPROTO: protocol error, symlink '../@babel/parser/bin/babel-parser.js' -> '/var/www/my-project/node_modules/.bin/parser'

$ cd $ npx create-nuxt-app my-project $ cd my-project $ npm run dev

# localectl set-locale LANG=ja_JP.UTF-8 # timedatectl set-timezone Asia/Tokyo

$ curl --silent --location https://rpm.nodesource.com/setup_12.x | sudo bash - $ sudo yum install -y nodejs $ node --version v12.16.3 $ npm --version 6.14.4 $ sudo npm install -g @vue/cli $ vue --version @vue/cli 4.3.1

$ cd $ npx create-nuxt-app my-project create-nuxt-app v2.15.0 Generating Nuxt.js project in my-project Project name my-project Project description My splendiferous Nuxt.js project Author name Choose programming language JavaScript Choose the package manager Npm Choose UI framework None Choose custom server framework Express Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection) Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection) Choose test framework None Choose rendering mode Universal (SSR) Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)

successfully created project my-project To get started: cd my-project npm run dev To build & start for production: cd my-project npm run build npm run start

$ cd my-project $ npm run build $ nohup npm run start & [1] 2900 $ curl http://localhost:3000

$ kill 2900

$ ps aux | grep npm

$ mkdir logs $ nohup npm run start > logs/access.log 2> logs/error.log &

$ vi package.json $ nohup npm run start &

# amazon-linux-extras install nginx1.12 -y # vi /etc/nginx/nginx.conf # systemctl start nginx # systemctl enable nginx