1. HOME
  2. プログラミング
  3. Vue.js
  4. 【初心者向け】Vue.js + Expressで環境構築をしてみよう

【初心者向け】Vue.js + Expressで環境構築をしてみよう

  • 2022.01.10
  • 2022.11.27
  • Vue.js
【初心者向け】Vue.js + Expressで環境構築をしてみよう

Vue.jsとExpressを使用した環境構築方法を知りたい！

こういった疑問に答えていきます。

最近ではWebアプリケーション開発にフロントエンドはVue.js、バックエンドはExpressといった組み合わせが増えていきいます。

今回は初心者の方向けに、Vue.jsとExpressを使用した環境構築の方法を紹介していきたいと思います。

では早速やっていきましょう。

目次

Vue.js + Express で環境構築をしてみよう

Vue.js セットアップ

まず始めに、Vue.js（Vue-CLI）の環境構築を行なっていきます。
ターミナルで下記コマンドを実行して、必要なファイル等を準備していきます。
※今回使用するファイルはGitHubにアップしているので、活用してください。

$ vue create <プロジェクト名>

今回は特にモジュール等は必要ないので、「Default (v2) 」 「Manually」どちらでも構いません。ここでは「Default (v2) 」 で設定していきます。

インストールできたら下記コマンドを実行して、http://localhost:8080/で画面が表示されるか確認します。

$ npm run serve

Express セットアップ

次にExpressの環境構築を行なっていきます。
まず始めに必要なパッケージをインストールしていきます。

$ npm install express cors
$ npm install -D nodemon

インストールができたら、package.json等と同じ階層に「server.js」ファイルを作成し、下記内容を記述します（ファイル名は任意です）。

const express = require('express')
const serveStatic = require('serve-static')
const cors = require('cors')
const app = express()
const port = process.env.PORT || 3000

// 開発環境のCORS対策
if (process.env.NODE_ENV !== 'production') {
	app.use(cors())
}

// Buildしたときに生成されるdistディレクトリ（静的アセットファイル）を提供する
app.use(serveStatic(__dirname + '/dist'))

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

記述できたら、Vue.js側にも修正を加えていきます。
package.json等と同じ階層に「vue.config.js」ファイルを作成し、下記を記述していきます。既にある場合はそのまま記述してください。

module.exports = {
	devServer: {
		proxy: 'http://localhost:3000',
	},
}

「devServer」は、開発サーバーのポート等を変更できるもので、その中の「proxy」を変更していきます。サーバー側では基本的に、同じドメイン、ポート番号からでないとリクエストを受け取ることができないので、proxyを利用して同じポート番号としてリクエストを送れるようにします。

次に、package.jsonにスクリプトを追加していきます。
今回は、フロントエンドとバックエンドの両方の開発サーバーを起動する必要があるので、下記を追加します。

{
  // 省略
	"scripts": {
		"serve:frontend": "vue-cli-service serve", // 修正
		"serve:backend": "nodemon ./server.js", // 追加
		"build": "vue-cli-service build",
		"lint": "vue-cli-service lint"
	},
  // 省略
}

実際に開発を行うときは、「serve:frontend」「serve:backend」の両方のスクリプトを実行する必要があります。

以上で設定は完了です。

実際にリクエストを送ってみる

実際に設定できているか、リクエストを送って確認して見ましょう！

server.js に下記内容を追記します。

const express = require('express')
const serveStatic = require('serve-static')
const cors = require('cors')
const app = express()
const port = process.env.PORT || 3000

if (process.env.NODE_ENV !== 'production') {
	app.use(cors())
}

app.use(serveStatic(__dirname + '/dist'))

// 下記内容を追記
app.get('/api/message', (req, res) => {
	res.send('get message')
})

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

次にフロントエンド側からリクエストを送ってみます。
今回はaxiosを使ってリクエストを送るので、下記コマンドを実行してパッケージを追加します。

$ npm install axios

追加できたら、src配下にaxiosの設定ファイルを作成し、書き内容を記述していきます。

import axios from 'axios'

// baseURLの設定
const http = axios.create({
	baseURL: process.env.NODE_ENV !== 'production' ? 'http://localhost:3000/api' : '/api',
})

export default http

追加できたら、Vueファイルで「$axios」として使えるようにしていきます。
src/main.js に下記内容を追記していきます。

import Vue from 'vue'
import App from './App.vue'
import http from './axios' // 追加

Vue.config.productionTip = false
Vue.prototype.$axios = http // 追加

new Vue({
	render: (h) => h(App),
}).$mount('#app')

諸々設定ができたので、下記内容を追記して、リクエストを送ってみます。

<template>
	<div id="app">
		<img alt="Vue logo" src="./assets/logo.png" />
		<HelloWorld msg="Welcome to Your Vue.js App" />
	</div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
	name: 'App',
	components: {
		HelloWorld,
	},
  // 追記
	async created() {
		await this.$axios.get('/message').then((res) => {
			console.log(res.data)
		})
	},
}
</script>

<style>
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
	margin-top: 60px;
}
</style>

http://localhost:8080/ でコンソールログに「get message」が表示されたらOKです。

Herokuにデプロイしてみよう

設定自体は終わりですが、実際に本番環境で動作するか確認してみましょう！
ここでは実際にHerokuにデプロイして確認していきます。

アカウント登録がまだな方はこちらから登録を行ってください。
登録ができたら、こちらを参考にHerokuのインストールを行ってください。

追記: 2022/11/28
2022年11月28日から無料プランが廃止されました。

Herokuの設定

まずはHerokuの設定から行なっていきます。
下記コマンドを実行してHerokuにログインをします。

$ heroku login

ログインができたら、下記コマンドを実行してHeroku アプリを作成します。
createの後に、任意のアプリ名を指定することもできます。

# デフォルトのアプリ名の場合
$ heroku create
or
# アプリ名を指定
$ heroku create アプリ名

参考: https://devcenter.heroku.com/ja/articles/heroku-cli#download-and-install

以上で設定が完了したので、実際にデプロイをしてみましょう！

デプロイ

まずはgitコマンドで、現在の内容をコミットします。

$ git add .
$ git commit -m "My first commit"

コミットまでできたら、下記コマンドでデプロイしていきます。

$ git push heroku master

デプロイが完了したら、ログに公開されたリンクが表示されるので、そちらからアクセスし実際に表示を確認してみてください！

参考: https://devcenter.heroku.com/ja/articles/git

まとめ

今回はVue.js + Expressを使用した開発環境の構築方法について解説してきました。

他にもやり方は色々あると思いますので、自分のやりやすい方法、プロジェクトに適した方法を探してみてください。

では今回は以上になります。

オススメの教材