DevChallengesにチャレンジしてみた

普段からReederでRSSを使った情報収集をしていて、
ネタ記事からQiitaやPhotoshopVIPなんかも色々見てます。

先日も日課というか習慣化してるReederをiPhoneで眺めてたら、2020年、オンラインサービスやWebアプリの開発を独学で勉強したい人に役立つ練習プロジェクトのまとめ という記事を見つけて、最近の学習モチベーションが全く上がらないところに丁度良い題材見つけたのでやってみようと思いました。

まずは何をやろうかというところで、記事の一番最初をやってみようとImage Uploader からやることに。
DevChallengesのアカウントをGithubと連携するところからスタートして、FigmaでカンプURLも確認して始まりました。

作ったものはコチラ

• image-uploader
• DevChallenges
• Github

何で作るか

最初はLaravelとVueJSでやろうと環境構築していましたが、作ったアプリのサーバー側を準備するのが面倒だったので、この機会にFirebaseに手を出そうと決心！

• フロント

  • Vue.js 2.6.11

• バックエンド

  • Firebase

    • Cloud Firestore
    • Storage

• デプロイサーバ

  • Netlify

こんな感じの構成で、公開するためのデプロイサーバはNetlifyにしました。

VueJSの環境構築

# とりあえずのVueで環境構築
$ vue create image-uploader

# 今回はFirestoreとStorageを使うのでライブラリをインストール
$ yarn add vuefire@next firebase

Firebaseの設定

開発時は.eng.localにFirebaseの設定を追加

export default {
  apiKey: process.env.VUE_APP_API_KEY,
  authDomain: process.env.VUE_APP_AUTH_DOMAIN,
  databaseURL: process.env.VUE_APP_DATABASE_URL,
  projectId: process.env.VUE_APP_PROJECT_ID,
  storageBucket: process.env.VUE_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_MESSAGING_SENDER_ID,
  appId: process.env.VUE_APP_APP_ID,
  measurementId: process.env.VUE_APP_MEASUREMENT_ID
};

Netlifyの設定

後は普通に画面作って処理を書いてNetlifyにデプロイですが、
今回はSPAで作っているので/以外のURLリクエストは不要なためリダイレクトをしないといけないです。
なので、Netlifyを調べるとドキュメントルートに_redirectsファイルを作ってリダイレクト設定を行うとできるみたいです。

リダイレクトの記述内容は以下。

# vueApp/public/_redirects
/*    /index.html   200

これをpublicに置いてデプロイするとNetlifyのビルド実行時にコピーしてdist(今回の公開ディレクトリ)に配置してくれるので、
Netlifyがリダイレクト処理してくれます。

後は、.env.localで設定していたFirebaseの設定をNetlifyの環境変数Environment variablesに設定。
以上、出来上がり！

感想

久しぶりのVueと初めてのFirebaseで少し時間がかかりましたが、楽しくできました。
簡単な課題もあるので、Githubの実績作り&ポートフォリオ&ブログネタにもなるので、
これからもチャレンジしてみようかと思ってます。

参照

• Cloud Firestore にデータを追加する
• Storage ウェブでファイルをアップロードする
• Netlify Redirects and rewrites