- 投稿日:2020-07-30T23:31:57+09:00
herokuでNode.jsを立ち上げるまでの手順
色々と理解できていないことは多いですが、とりあえずherokuで立ち上げられたので手順を記載。
エラーでまくったしいろんなサイト見すぎてもはや何を参考にしたのかわからなくなってます。前提
① Node.js、herokuはインストール済み
② パッケージマネージャーはyarnを仕様
下記の記事を見てyarnにしました
https://qiita.com/qulylean/items/afa2acff6ed963c88798yarnのインストール
上記の記事を参考にyarnをインストールします。
yarnでhttpモジュールのインストール
コマンドプロンプトを立ち上げて今回作成したいフォルダまでディレクトリの移動をします。
フォルダの移動 $ cd フォルダ名 前に戻る $ cd .. フォルダの作成 $ mkdir フォルダ名 フォルダを作成して移動 $ mkdir フォルダ名 && cd フォルダ名 ファイルの作成 $ type nul > ファイル名ディレクトリの移動が完了したら下記のコマンドを実行します。
$ yarn add httpすると必要なフォルダが用意されて下記の状態になります。
フォルダフォルダ ├ node_modules ├ package.json └ yarn.lockyarnでexpressモジュールのインストール
次のコマンドを実行してexpressのインストールを行います。
expressのインストール$ yarn add express実行完了すると下記の表示がでるので、package.jsonに記載するためにバージョンだけ覚えておいてください。
yarn add v1.22.4 [1/5] Validating package.json... [2/5] Resolving packages... [3/5] Fetching packages... [4/5] Linking dependencies... [5/5] Building fresh packages... success Saved 1 new dependency. info Direct dependencies └─ express@4.17.1 info All dependencies └─ express@4.17.1 Done in 3.23s.package.jsonの変更
初期状態だと下記のようになっていると思います。
pakage.jsonデフォルト{ "dependencies": { "http": "^0.0.1-security" } }それを次のように変更します。
pakage.json変更後{ "name": "hello_world", "version": "1.0.0", "description": "", "main": "app.js", "author": "", "license": "ISC", "dependencies": { "express": "^4.17.1", "jade": "*" }, "engines": { "node": "12.18.1" } }現在使用しているnodeのバージョンは下記のコマンドで確認が可能です。
nodeのバージョン確認$ node --versionJavaScriptファイルの作成
ファイル名は先程、pakage.jsonで指定したapp.jsにして下記を書きます。
app.jsconst express = require('express'); const app = express(); const port = process.env.PORT || 5000; app.get('/', (req, res) => { res.send('Hello World!'); }); app.listen(port, () => { console.log('listen: ' + port); });ここまでできたらまずローカルで動くかを確かめてみましょう。
コマンドプロンプトで下記を実行してください。
$ node app.js
listen: 5000
と表示されたらブラウザで下記を開いてください。localhost:5000無事「Hello World!」が表示されていたらOKです。
閉じる場合コマンドプロンプト上でCtrl + C を押すと終了できます。Procfileの作成
コマンドプロンプトで下記を実行
Procifleの作成type nul > Procifle作成したら開いて下記を入力
web: node app.js最終的には下記のフォルダ構造になります。
フォルダフォルダ ├ node_modules ├ package.json ├ yarn.lock ├ app.js └ Procfileherokuにデプロイ
デプロイするのに書きの順番で実行していきます。
herokuへのデプロイ$ git init $ git add . $ git commit -m 'init' $ heroku login $ heroku create もしくは $ heroku create ファイル名 $ git heroku push master次回から更新する際は一度にまとめても記載が可能です
heroku$ git add . && git commit -m 'init' && git heroku push master完了したらherokuを開きます
herokuを開く$ heroku openもしくはデプロイ時に出てきた
https://{アプリ名}.herokuapp.com/をブラウザで開いても大丈夫です。
Hello World!が表示されていたら完了です。herokuへのデプロイ時にエラーがでたら
下記のエラーが出た場合はyarnのバージョンが古いためのエラーです。
error Your lockfile needs to be updated, but yarn was run with `--frozen-lockfile`.コマンドプロンプトで下記を実行してyarnをアップデートして再度実行してみてください。
$ yarn install
- 投稿日:2020-07-30T23:02:39+09:00
【Express】ミドルウェアとは何か
ミドルウェアとは何か
ミドルウェアとは:サーバーの動作をカスタマイズするもの。
ルーターハンドラが作動する前に何かを行うもの。・ミドルウェアがない時
新しいリクエスト ↓ 通常のルーターハンドラが作動・ミドルウェアがある時
新しいリクエスト ↓ ミドルウェアが作動! ↓ 通常のルーターハンドラが作動ミドルウェアの設定
app.use()を用いて設定する
ミドルウェアの動作例
・リクエストしているHTTPメソッドと、リクエストを送っているパスをターミナルに表示させる
app.use((req, res, next) => { console.log(req.method, req.path) next() //ミドルウェア機能の終了を明示的に表示 })・ミドルウェアを使ってアクセスを制限する
GETリクエストを送るとアクセスを拒否され、それ以外だと通常のルーターハンドラが起動
app.use((req, res, next) => { if(req.method === 'GET'){ res.status(400).send('GETリクエストは使用できません') }else{ next() //ミドルウェア機能の終了を明示的に表示 } })
- 投稿日:2020-07-30T22:29:10+09:00
npmコマンドを使えるようにするまでのまとめ【mac】
macの初期状態ではnpmコマンドを使うことができないので、それを使える状態になるまでを記事にまとめました。
macでnpmコマンドを使えるようにするには、Homebrewのインストール,Nodebrewのインストール,Node.jsのインストールが必要なので、それを順番にインストールしていきます。このページの最後に順番にやっていった場合の各場面での画面のスライドを埋めこんでいますので、解説が分からない場合は、そちらで確認しながらやってみてください!
Homebrewのインストール
パッケージ管理システムのひとつのHomebrewをインストールします。
(パッケージをmacに最適にインストールしてくれるようにするツールです)Homebrew公式 にアクセスし、インストールの部分のコードをコピーし、ターミナルを起動してペーストしてEnterで実行します。(インストールは少し時間がかかります。)
一応、インストールのコードを下記に記載します。ターミナル/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"Nodebrewのインストール
Node.jsのバージョンを管理するためのツールのNodebrewをインストールします。
brewコマンド(Homebrewのコマンド)を使い、nodebrewをインストールします。
ターミナルbrew install nodebrew
Node.jsのインストール
Node.js公式 にアクセスし、推奨版の部分をクリックし、Node.jsの推奨版をインストールします。(最新版でもOKです)
このNode.jsをインストールすることで、npmコマンドが使えるようになっています。
まとめ
今回の解説を手順通り進めると下記のスライドのような画面の移り変わりになっていきます。
分からなくなった場合は是非確認してみてください。(必ずできます)See the Pen npm_install_howto by engineerhikaru (@engineerhikaru) on CodePen.
この記事が良いと思った方は、LGTMをしていただければ嬉しいです!
フォローも是非お願い致します(^^)
- 投稿日:2020-07-30T22:18:34+09:00
Node.jsとJavascriptの違い、関係について
はじめに
はじめてNode.jsを学んだ方や使用した方はこう思いませんでした?
「なんで同じJavaScriptなのに名前が違うの?サーバーサイドで動くJavaScript?使ってるけどいまいちよくわからない…」
そんな疑問を持った方たちのために簡単に解説していきます。
言語・処理系について
そもそもプログラミング言語とは、コンピュータに情報や命令を伝えるための「文字・記号の集まり及びそのルール」です。そして、プログラミング言語によって書かれた文字列を処理系によって処理することで、コンピュータに情報を伝達することができます。
日本人は日本語を理解することができますよね?逆に、日本語を知らない外国人は日本語を理解することができません。これは、日本人が頭の中に日本語の処理系を持っているから言語を理解できるのです!
このように言語は、その言語の意味やルールを処理・理解してくれる処理系がないと全く機能しなくなってしまいます。
プログラミング言語における処理系とは?
日本語や英語などを理解するための処理系はそれぞれの人間の頭脳でした。じゃあ、プログラミング言語における処理系は何でしょう?
それは、プログラミングをする環境を構築する際にインストールしたやつです!
言語 処理系 Python CPython C GCC PHP PHP など
基本的にプログラミング言語と処理系はセットなのです。
では、フロントでJavaScriptを動かしている方は、何もインストールしてないのに動くじゃん!と思うかもしれないですが、これはブラウザに処理系が搭載されているためです。
じゃあNode.jsって?
そうです、
Node.jsとはJavaScriptの処理系です!
プログラミング言語と処理系の関係について理解できれば、名前が違う!といった疑問も解消できるはずです。
JavaScriptはブラウザで動くフロントサイドの言語と昔は言われていましたが、このNode.jsという処理系によってPythonやPHPといったサーバーサイドの言語と同じようなことができるのです!
おわりに
自分でも曖昧な部分があったので、記事として書き起こすことで整理してみました。
自分の成長のためにも、間違った部分やご指摘があればどんどんコメントお願いします!
- 投稿日:2020-07-30T21:56:12+09:00
TwitterAPIをServerlessを使ってLambda + Nodejsで動作させてみた
概要
TwitterApiを使ってあれこれしたいと思ったので動かすまでの手順をまとめてみた
Nodejsで作成した理由はなんとなくフロントエンドと同じjavascriptでやれたら楽かなーと思ったぐらいです。基本セットアップ
ServerlessやNodejsなどのインストールは以前私が書いた記事ですが、こちらが参考になるかと思います。
https://qiita.com/tama0571046/items/cfe262b002f6434b915eTwitterAPIを使用するまでの流れは記事がたくさんありますので、調べるとすぐに出てくるかと思います。
私が参考にしたサイト
https://www.itti.jp/web-direction/how-to-apply-for-twitter-api/Serverless
ServerlessをAWSの連携
まずはAWSにログインして[IAM]の[ユーザー]からアクセスキーとシークレットキーを取得してきてserverlessに教えます
sls config credentials --provider aws --key XXXXXXXXXXXX --secret XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXプロジェクト作成
Serverlessを使ってプロジェクトを作成します。
serverless create --template aws-nodejs --name twitter_server --path twitter_server cd twitter_servernode_moduleを追加
entry pointだけ変更してあとはそのままEnterでOK
yarn init > question name (twitter_server): > question version (1.0.0): > question description: > question entry point (index.js): handler.js > question repository url: > question author: > question license (MIT): > question private:twitterモジュールを追加
yarn add twitterevent.jsonの追加
handler.jsのevent引数で取得できます
vim event.jsonevent.json{ "key1": "value1", "key2": "value2", "key3": "value3" }handler.jsの修正
Twitter APIのリファレンスを参照して取得したいデータに合わせてコーディングしてください。
https://developer.twitter.com/ja/docs/ads/general/api-referenceなんとなくこんな感じかな。というのを下記に記述します。
もっといいやり方あったら教えて下さい。handler.js'use strict'; var Twitter = require('twitter'); // 初期化 var tweet_client = new Twitter({ consumer_key: '***', consumer_secret: '***', access_token_key: '***', access_token_secret: '***' }); module.exports.hello = event => { if (event.action == 'test') { finish(test()); } }; function finish (body) { if (body) { console.log(body); return { statusCode: 200, body: body }; } console.log('No Action'); return { statusCode: 500, body: 'NoAction' }; }; function test () { tweet_client.get('statuses/home_timeline', {}) .then((tweets) => { console.log(tweets); return tweets; }) .catch((error) => { console.log(error); return error; }) };function名をhelloから変えたい場合はserverless.ymlも合わせて修正してください
serverless.ymlを修正することでデプロイ先のリージョンなどを変更することもできますLambda
デプロイ
serverless deploy -v
デプロイしたfunctionの実行
serverless invoke --function hello -p event.json --log不必要になったら消すようのコマンド
serverless remove -v
以上です。
所感
Node.jsで複雑なTwitterAPI取得のソースコードは向いてないのかなと思いました。
TwitterAPIで取得するところが非同期処理になるため、await/async地獄になってしまいました。
例えば、APIを使ってリストの一覧を取得してきて、そのデータを使用してリストのメンバーを取得するみたいな処理を書こうとするだけで結構めんどくさかったです。
だったらPythonで書けばよくね!?と思ったので、次はPythonで試してみます。
また、そちらも記事にしていこうと思います。
- 投稿日:2020-07-30T20:57:55+09:00
heroku×node.jsでcorsエラーがなかなか解決しないときに気をつけること
node.js(express)でサーバーサイドを記述し、herokuに上げていたのですが、今まではすんなりと解消できていたcorsのエラーに嵌ってしまったので、記事を書くことにしました。
環境
- heroku: 7.42.5
- node.js: 12.16.2
- express: 4.17.1
- cors: 2.8.5
基本的な対応方法
今回はサーバーサイドとフロントエンドを異なるレポジトリに書いているため、フロントエンドからfetch等でサーバーサイドのAPIを呼ぶ際には、corsのエラーが生じてしまいます。
Access to fetch at 'https://xxx.com' from origin 'https://yyy.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
基本的には
npm install cors
をして、const express = require('express') const cors = require('cors') const app = express() app.use(cors())と書けば解決します。
注意点① - credentialsをtrueにする場合
ただ、credentialsをtrueとしたい場合には、originを具体的に指定する必要があります。
const express = require('express') const cors = require("cors"); const app = express(); const corsOption = { origin: [ "http://xxx.com", "https://yyy.com", ], credentials: true, }; app.use(cors(corsOption));というようにします。
originは、1つの場合は配列なしの文字列でも大丈夫で、1つにしろ複数にしろ正規表現を用いることもできます。
ここまでは、ぐぐると色々な解説が出てくると思うのですが、今回はさらに二重に嵌ってしまっていました。注意点② - 最後の"/"
1つめは、originの最後に"/"を入れてしまっていたことです。
本来は"http://xxx.com"
としなければいけないところを、アドレスバーからコピペするなどして、"http://xxx.com/"
としてしまうと、エラーが生じます。注意点③ - herokuのconfig varsが登録されていない
2つめは、herokuのconfig varsが登録されていなかったということです。
かなり初歩的なミスなのですが、例えば、process.env.TEST_KEY
みたいなコードを書いていたとして、ローカルでは.envの変数を参照していたとします。
当然、herokuではconfig varsにTEST_KEY
を登録しなければいけないのですが、必要なキーなどを参照できなかった場合も、corsのエラー同様のメッセージが表示されてしまうため、数時間を無駄にしてしまいました。
皆様もお気をつけください。参考
- 投稿日:2020-07-30T15:45:26+09:00
MERNスタックを学べる動画をまとめてみた(外国語の動画です)
MERNスタック is 何?
MongoDB, Express, React.js, Node.jsの4つを使った開発環境のアーキテクチャのことです。主に、Webアプリ開発に用いられます。
MongoDBとは
ドキュメント志向のNo-SQLデータベース。データの保存などに使う。DBは、データベースの意。データがJSON形式みたいな感じなので非常にJavaScriptと相性が良い。
ExpressJSとは
Node.jsのフレームワーク。Node.jsの機能と一緒に使う事で、バックエンドの構築が出来る。
ReactJS
単一ページWebアプリのUIを作成するUIコンポーネントを構築出来る。アプリケーションのView部分を担っている。
NodeJSとは
サーバサイドJavaScriptエンジン のことです。
MERNスタックの良いところは?
ずばり!!
全部JaveScriptで書けることです!JavaScriptはフロントだけでしか使えへんやろ・・・。と思われがちですが、なんでも行けちゃうんです。もし、HTML,CSS,JavaScriptという静的なサイトしか作ったことがないという人は、新しく言語を学ばずともWebアプリケーションを開発することができるのでオススメです!!MERNスタックを学べる動画一覧(英語のみ)
Youtubeの動画か再生リストになっていて一年以内(2019年の8月以降)に投稿されているものをまとめました。
JavaScriptの勉強している人は分かると思いますが、アロー関数とか非同期処理(async await)とか、Hooksの書き方をしている教材がすくないですよね・・・。でも、こちらに挙げているものは、どれも最新の記法で書かれているのでコードを眺めるだけでもけっこう勉強になります!
CODERS NEVER QUIT
インスタのクローンアプリが作れます。
動画本数:53本 1動画:10分前後 合計:9時間John Ahn
Youtubeのクローンアプリが作れます。
合計:4時間30分John Ahn
映画の紹介サイトが作れます。
合計:1時間30分John Ahn
ECサイトが作れます。
合計:5時間Coding Garden with CJ
旅行のログを投稿するサイト。Live形式です。
合計:4時間Programming with Jaiti
ログイン認証アプリが作れます。
まだ完成するところまでの動画はupされていませんが分かりやすいですね。おススメ勉強法
外国語だったとしてもコードの書き方は同じなので基本的な書き方さえ知っていれば分かります。しかし、この動画をみて学ぶのはファイル構成だったり、使用するライブラリの使い方、モダンな書き方を一から見て、自分で次に何かプロダクトを作るときに再利用することができるようにすることです。そのためにお勧めしたいのが・・・
コメントアウト勉強法です!
その名の通り、コメントアウトしまくります。どのタイミングでコメントアウトするかは人それぞれなんですが、一番良いのは再生リストになってるやつは一つの動画が終わるたびにコメントアウトするとよいですね。長い動画だと30分か、一つの機能を実装する度にすると良いと思います!
メリットとしては、コードを写経するだけだと見返したとしても何も覚えてなかったりしますが、これをすると自分の言葉でそのコードを表現する必要があるので、アウトプット要素が含まれます。本当のアウトプットは自分のプロダクトを作るときだとは思いますが、インプットと同時に簡単なアウトプットをしておくことで次にコードを見る時や他の人のコードを理解する時にも役に立ちます!ぜひお試しください!
- 投稿日:2020-07-30T10:36:42+09:00
Node.js新規アプリケーション作成時の設定手順
前提条件
node.jsがインストールされていること手順
1: 任意の場所に、アプリケーションを格納するフォルダを作成する
・・・今回はデスクトップにnodeフォルダを作成
2: コマンドプロンプトにて下記コマンドを入力し、package.jsonを生成する
入力> cd C:\Users\yamapi1012bs\Desktop\node # ↑ユーザー名 > npm init --yes # package.jsonがフォルダに生成される#以下のように出力されればOK Wrote to C:\Users\yamapi1012bs\Desktop\node\package.json: { "name": "node", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } >
3: npmパッケージをインストールする入力> npm install express ejs # 今回は、expressとejsの2つのパッケージをインストール# 以下のように出力されればOK > node --harmony ./postinstall.js Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/) npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN node@1.0.0 No description npm WARN node@1.0.0 No repository field. + express@4.17.1 + ejs@3.1.3 added 65 packages from 44 contributors and audited 65 packages in 18.403s found 0 vulnerabilities >
nodeフォルダ内に
- node_modules(フォルダ)
- package.json
- package-lock.json
が生成されていれば設定完了
実行してみる
1: nodeフォルダ内に以下を作成
- index.js
- views(フォルダ)
- sample.ejs(viewsフォルダ内)
index.jsconst express = require('express'); const app = express(); app.get('/', (req, res) => { res.render('sample.ejs'); }); app.listen(3000);sample.ejs<h1>Hello World</h1>2: コマンドプロンプトにて下記コマンドを入力
入力> node index.js
3: ブラウザを開いて「localhost:3000」にアクセス
sample.ejs(Hello World)が表示されればOK
- 投稿日:2020-07-30T01:33:24+09:00
MEVN STACKとは〜Vueでフルスタックに作りたい〜
MEVN STACKって何?
MEVN STACKってこういうのだよ
MEVN STACKとは、
- Mongodb
- Express
- Vue.js
- Node.js
の頭文字を取ったもの。
類似にMEAN STACK(Mongodb,Express,AngularJS,Node.js)もありますね!
Qiitaには、MEANはあったけどMEVNについてはなかったので、これから頑張って書いていきたいと思います。
もし少しでもいいね!と思ったら「Looks Good To Me!」をください。励みになります!構成はこうすればできるよ
それぞれの役割についてです。
[引用画像:https://bezkoder.com/vue-node-express-mongodb-mevn-crud/]上記のような構成で構成します。
構築方法は以下の通りです。環境構築
■動作環境
OS:macOS Catalina 10.15.6
Node:v13.8.0
Vue:@vue/cli 4.2.2
mongodb:v4.2.3mongodbの起動
ターミナルにて以下のコマンドを実行してmongodbを起動します。パスに記載されているところに「mongod.conf」が作成されているので、必要な項目を設定する。
terminal.hoge@hoge-MacBook-Air hoge %mongod --config /usr/local/etc/mongod.conf僕はソースコードのプロジェクトはdocumentsの配下に格納するようにしているので、storageにはdocumentsの下にdataフォルダを作成してデータベースのデータを格納できるようにしているよ。任意でパスは変更してね。
mongod.confsystemLog: destination: file path: /usr/local/var/log/mongodb/mongo.log logAppend: true storage: dbPath: /Users/Seastar/Documents/data/db net: bindIp: 127.0.0.1mongodbの起動を完了したらアプリケーションプロジェクトを作成はじめます!
プロジェクトの作成
今回はhogeという名前で作っているので、必要に応じて変更してくだせぇ。
terminal.hoge@hoge-MacBook-Air documents %mkdir hoge && cd hoge hoge@hoge-MacBook-Air hoge %npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (hoge) version: (1.0.0) description: entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to /Users/hoge/Documents/hoge/package.json: { "name": "hoge", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } Is this OK? (yes) y ╭────────────────────────────────────────────────────────────────╮ │ │ │ New minor version of npm available! 6.13.6 → 6.14.7 │ │ Changelog: https://github.com/npm/cli/releases/tag/v6.14.7 │ │ Run npm install -g npm to update! │ │ │ ╰────────────────────────────────────────────────────────────────╯上記のコマンドを無事に実行するとhogeフォルダの配下に「package.json」が作成される。
作成されたのを確認したら以下のコマンドを続けて実行する。terminal.hoge@hoge-MacBook-Air hoge %npm install express bcryptjs passport passport-jwt jsonwebtoken mongoose body-parser cors concurrently mongodb hoge@hoge-MacBook-Air hoge % npm i -D nodemonそれぞれの役目は以下の通り
- express
- Node.jsのフレームワークの一つ
- サーバーサイド処理を書くために必要
- bcryptjs
- パスワードなどをハッシュ化するため
- passport
- 認証機能を実装するため
- passport-jwt
- passport JSON Web Tokeで電子署名付きのJsonで改ざんチェック
- jsonwebtoken
- JSON Web Tokeでのチェック
- mongoose
- mongodbへの操作のため。ちなみにマングース
- body-parser
- formの入力値を受け取るため
- cors
- Cross-Origin Resource Sharing
- concurrently
- npmのコマンドをサーバー側とフロント側で同時に実行するため
- mongodb
- mongodbを操作するためにドライバーが必要
- nodemon
- アプリケーションのコードの変更を監視し、変更があった際に自動でサーバーの再起動をしてくれるツー
その後、「server」のフォルダとVueクライアントの「client」を作成していく。
terminal.hoge@hoge-MacBook-Air hoge % mkdir server hoge@hoge-MacBook-Air hoge % vue create client Vue CLI v4.2.2 ┌─────────────────────────────────────────┐ │ │ │ New version available 4.2.2 → 4.4.6 │ │ Run npm i -g @vue/cli to update! │ │ │ └─────────────────────────────────────────┘ ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router, Vuex, Linter ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a linter / formatter config: Basic ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i > to invert selection)Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In package.json ? Save this as a preset for future projects? No ....省略..... ? Successfully created project client. ? Get started with the following commands: $ cd client $ npm run serve hoge@hoge-MacBook-Air hoge %cd client hoge@hoge-MacBook-Air client %npm i axios hoge@hoge-MacBook-Air client %cd ../ hoge@hoge-MacBook-Air hoge %cd server hoge@hoge-MacBook-Air server %touch index.jsこの記事はここまで
長くなるので今回はここまでにします。
次回以降に具体的なコードを作っていきます。