이 기사는 세키구치 두께가 포트폴리오용으로 개발한 WEB 앱의 소개 기사입니다.

앱 개요

앱 이름: 히토코 일기 ver2
매일 기록을 텍스트 형식으로 저장하는 간단한 일기 앱입니다.
코드는 Github에서 볼 수 있습니다. ( 프런트 엔드 코드 ・ 백엔드 코드 )

제작 환경

· 인프라: AWS
・백엔드:node.js＋Express
・프런트 엔드:Vue.js
· 데이터베이스: MySQL

● 각 버전
node.js v12.18.2, Express 4.17.1, Vue.js 2.6.12, Veu-CLI 4.4.6, MySQL 8.0

앱에서 수행하는 주요 처리

사용자 등록 및 인증 처리

일기 CRUD 처리

앱 구성

· 인프라는 AWS EC2에 Express 서버를 설치하고 RDS에 MySQL 데이터베이스를 설정합니다.
· 프런트 엔드는 Veu-CLI를 사용하여 구축하고 SPA로 만듭니다. (Nuxt.js를 사용하지 않음)
· Express 서버에서 SPA 호스팅과 데이터베이스 처리를위한 엔드 포인트를 제공합니다.
· Vue.js-Express 간의 통신은 axios에서 데이터를 교환하고 있습니다.

서버 및 클라이언트 구성도

사용자 등록 및 인증 기능의 동작

・UI로부터 유저 등록, 로그인을 실시합니다.
· Vue.js에서 axios로 통신하고 Express 서버의 엔드 포인트에 액세스하여 사용자 등록, 로그인 처리를 실현합니다.
・로그인하면 토큰이 발행되고, 이후의 처리는 토큰에 의해 유저를 일의에 특정합니다.

일기 기능 동작

・UI로부터 일기의 표시・작성・갱신・삭제를 실시합니다.
· Vue.js에서 axios로 통신하고 Express 서버의 엔드 포인트에 액세스하여 일기 CRUD 처리를 실현합니다.
· axios 통신 시 서버에 토큰을 전송하여 사용자를 고유하게 식별하여 일기 데이터를 처리합니다.

폴더 트리

●vuecli-app의 폴더 구성(프런트 엔드)

[ルート]
 └ [public]フォルダ
     └ [images]フォルダ 
       　└ 各種imageは全てここに格納
     └ index.html
     └ favicon-diary.ico
 └ [src]フォルダ
     └ [asset]フォルダ
     └ [components]フォルダ
      　└ [diary]フォルダ　日記関係のVueコンポーネントを格納するフォルダ
             └ Index.vue　トップページ（アプリの紹介ページ）
             └ Mypage.vue　日記の一覧表示ページ
             └ Edit_Create.vue　日記作成ページ
             └ Edit_Update.vue　日記更新・削除ページ
             └ Header.vue　ログイン時のヘッダーコンポーネント
             └ Help.vue　機能紹介ページ
      　└ [login]フォルダ　ユーザー認証関係のVueコンポーネントを格納するフォルダ
             └ Regist.vue　ユーザー登録ページ
             └ Login.vue　ログインページ
             └ Trial.vue　お試しユーザーログインページ
     └ App.vue
     └ main.js
     └ router.js　Vue.jsのルーティングを記述したJS
     └ store.js　Vuexの設定を記述したJS

●express-app의 폴더 구성(백엔드)

[ルート]
 └ [public]フォルダ　ビルドしたVue.jsのファイルをここに格納している。
     └ 各種ファイル。Vue-CLIでビルドしたdistフォルダ内のファイルをそのままコピーしたもの。
 └ [routes]フォルダ　axiosリクエストのエンドポイントを提供するためのルーターモジュールを格納したフォルダ
     └ get_diaries.js　一ヶ月分の日記を取得する処理のモジュール
     └ get_one_diary.js　一日分の日記を取得する処理のモジュール
     └ edit_create.js　日記を作成する処理のモジュール
     └ edit_update.js　日記を更新する処理のモジュール
     └ edit_delete.js　日記を削除する処理のモジュール
     └ user_regist.js　ユーザー登録する処理のモジュール
     └ user_login.js　ログインする処理のモジュール
     └ user_delete.js　ユーザーを削除する処理のモジュール
     └ user_auth.js　認証トークンを延長する処理のモジュール
 └ [function]フォルダ　サーバーに機能を与えるモジュールを格納したフォルダ
     └ db_connect.js　データベース接続設定モジュール
     └ token.js　認証トークン発行モジュール
     └ clear_auth.js　有効期限切れのトークン情報を削除するモジュール
 └ app.js