Nuxt.jsで作った簡単なポートフォリオサイトをFirebase Hostingを使って公開した話

# はじめに
こんにちはRIN1208です。　　
今回はポートフォリオサイトをFirebase Hostingを使って公開したのでその手順について書いていきます。　　
この記事は自分が今サーバーサイドエンジニアインターンさせていただいているJX通信社のアドベントカレンダー「[JX通信社Advent Calendar 2019](https://qiita.com/advent-calendar/2019/jxpress)」の13日目の記事です。

# 開発環境
- macOS Catalina
- Vue-cli
- Nuxt.js
- ElementUI
- VSCode（お好みのエディターを使用して下さい）  


**上記の環境で、npmとvue-cliが使える前提で説明します**

#制作物
今回制作したサイトは[こちら](https://rin1208-portfolio-95f54.web.app/)になります。  
ドメインは買ってないです.......


#プロジェクトの作成

```
$ vue init nuxt-community/starter-template projectname
```

projectnameの部分はプロジェクト名の為自由に入れて下さい  

またinitでエラーが出た場合はこちらのコマンドを行いinitをインストールして下さい  

```
$ npm install -g @vue/cli-init
```
 
プロジェクト作成します
特に無ければEnter三回で大丈夫ですがAuthorの部分はメアドの場合変更した方がいいかもしれません。今回は編集しました。  

```
$ vue init nuxt-community/starter-template projectname
? Project name projectname
? Project description Nuxt.js project
? Author rin1208
```

#ElementUIの導入
こちらのコマンドを入力して下さい. 
またインストール時に質問されますがEnter二回押していただければで大丈夫です

```
$ git init
$ vue add element-ui
```

次にpluginsというディレクトリの中にelement-ui.jsという名前のファイルを作成して下さい。 
以下のように編集して下さい

```plugins/element-ui.js

import Vue from "vue";
import ElementUI from "element-ui";

const locale = require("element-ui/lib/locale/lang/ja");
Vue.use(ElementUI, { locale });
```

次にnuxt.config.jsというファイルを以下のように編集して下さい

```nuxt.config.js
module.exports = {
     /*
     ** この部分にhead:などがありますが今回は省略します
     */
  mode: "spa",
  build: {
    extend(config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: "pre",
          test: /\.(js|vue)$/,
          loader: "eslint-loader",
          exclude: /(node_modules)/
        });
      }
    },
    vendor: ["element-ui"]
  },
  plugins: ["~plugins/element-ui"],
  css: ["element-ui/lib/theme-chalk/index.css"]
};
```
mode: "spa"と書かれている部分は今回作成するのはSPAのためこちらを追加します。

# Firebaseの準備

こちらの[Firebase](https://firebase.google.com/)にログインしてプロジェクトを作成します。

適当なプロジェクトを作成したらFirebaseのツールをインストールします

```
$ npm install -g firebase-tools
```

インストール完了後

```
$ firebase login
```
こちらのコマンドでブラウザからログインできます
ログイン後にこちらのコマンドで初期設定を行います

```
$ firebase init hosting
```
プロジェクトを選択するように聞かれるので先ほどFirebaseで作ったプロジェクトを十字キーで選択しエンターで決定します。
次に

```
? What do you want to use as your public directory?
```
と聞かれるので**dist**と入力して下さい

あとはEnterを押していただければ大丈夫です。

#デプロイする

```
$ npm run build
```
こちらのコマンドでdistファイルを生成します  
以下のコマンドでデプロイします。URLが表示されるのでそちらにアクセスすると先ほどビルドしたページが表示されます。またURLはFirebaseの方でも確認できます。

```
$ firebase deploy
```


#今回使用したコンポーネントライブラリ等

ここではElementUIにプラス、コンポーネントライブラリという形で書いていきます。  

## vue-simple-timeline
- 自分の出場したことのある大会、インターンの経歴などに使用しました

####実装方法
インストール

```
$ npm i vue-simple-timeline
```
pluginsにtimeline.jsというファイルを作成して下さい

```plugins/timeline.js
import Vue from "vue";
import SimpleTimeline from "vue-simple-timeline";
Vue.use(SimpleTimeline);
```
nuxt.config.jsに今作成したtimeline.jsのパスを追加していきます

```nuxt.config.js
module.exports = {
     /*
     ** この部分にhead:などがありますが今回は省略します
     */
  mode: "spa",
  build: {
    extend(config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: "pre",
          test: /\.(js|vue)$/,
          loader: "eslint-loader",
          exclude: /(node_modules)/
        });
      }
    },
    vendor: ["element-ui"]
  },
  plugins: ["~plugins/element-ui", "~/plugins/timeline.js",],
  css: ["element-ui/lib/theme-chalk/index.css"]
};
```



サンプルコードやyarnを使ったインストールは[こちら](https://www.npmjs.com/package/vue-simple-timeline)を参照して下さい。

## vue-burger-menu

- スマホでのタブ切り替えの時に使用しました。デフォルトのメニューはなぜか切り替え後にもう一度メニューが開いてしまう謎の動作をしてしまう為こちらを使用しました。（謎）  
- こちらもこちらでなぜかel-rowで範囲とかいじってるのに位置が動いてくれない....cssも効かない....なんで....(現在改善してます)  
- GitHubは[こちら](https://github.com/mbj36/vue-burger-menu)です。  
 
インストール

```
$ npm install --save vue-burger-menu
```
pluginsにtimeline.jsというファイルを作成して下さい

```plugins/menu.js
import Vue from "vue";
import { Slide } from "vue-burger-menu";
Vue.component("slide", Slide);
```
nuxt.config.jsに今作成したmenu.jsのパスを追加していきます

```nuxt.config.js
module.exports = {
     /*
     ** この部分にhead:などがありますが今回は省略します
     */
  mode: "spa",
  build: {
    extend(config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: "pre",
          test: /\.(js|vue)$/,
          loader: "eslint-loader",
          exclude: /(node_modules)/
        });
      }
    },
    vendor: ["element-ui"]
  },
  plugins: [
    "~/plugins/element-ui.js",
    "~/plugins/timeline.js",
    "~/plugins/menu.js"
  ],
  css: ["element-ui/lib/theme-chalk/index.css"]
};
```


#おわりに
ここまで読んでくださり有難うございます。今回初めてNuxt.jsに触れてみましたが作っている最中「あれ？これNuxt作ってる意味なくね....?」と思いながら制作してました。制作期間はページ自体は一日ほどでその他レスポンシブや調整などを毎日コツコツとやってたので一週間ほどかかりました。まだまだ修正するべき点はありますので少しずつ修正していきます。デザインもやったことがなくシンプルなものにしています。自分自身フロントが壊滅的に苦手&できない（backendもそこまでできないですが....）のでフロントできる人ほんと凄い.......devドメイン買います(掠れた声)......  

明日は[ペイ](https://peei.hatenablog.com/entry/2019/12/11/140623?_ga=2.190954159.405326039.1576291082-1167495838.1575890763)さんの記事になります。