こんにちは。KOUKIです。
今回は、Go言語とVue.jsを使ってユーザー認証アプリを作っていきたいと思います。
本記事は、開発環境構築について書いています。
<目次>
作るもの
前提条件
Docker環境が必要になるので、インストールしてください。※必須ではありませんが、環境構築が楽になります^^
また、NodeJSもインストールしておいてください。VueJSを構築するときに必要です。
ワークスペースの作成
ワークスペースを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
mkdir auth-with-golang-vue3 cd auth-with-golang-vue3/ mkdir docker mkdir docker/golang mkdir docker/vue3 touch docker/golang/Dockerfile touch docker/vue3/Dockerfile touch docker-compose.yml mkdir api mkdir api/controllers mkdir api/database mkdir api/routes touch api/main.go touch api/database/connect.go touch api/routes/routes.go touch api/controllers/authController.go touch api/controllers/controller.go touch api/controllers/forgotController.go mkdir api/models touch api/models/user.go touch api/models/passwordReset.go cd api/ go mod init auth-api cd .. mkdir db touch db/my.conf |
Docker
最初に、Dockerを準備します。
docker/golang/Dockerfile
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
FROM golang:1.15-alpine3.12 RUN apk update && \ apk upgrade && \ apk add git RUN go get github.com/cespare/reflex ENV CGO_ENABLED=0 WORKDIR /go/src/api COPY ./api ./ RUN go mod download |
docker/vue3/Dockerfile
|
1 2 3 4 5 6 7 8 9 10 11 12 |
FROM node:14.9.0-alpine3.10 CMD ["/bin/sh"] WORKDIR /app RUN apk update && \ npm install -g vue-cli ADD ./ui/package.json /app RUN npm install |
docker-compose.yml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
version: "3" services: api: build: context: . dockerfile: ./docker/golang/Dockerfile ports: - 80:80 volumes: - ./api:/go/src/api/ command: > sh -c "reflex -s -r '\.go$$' go run main.go" depends_on: - mysql environment: MYSQL_USER: admin MYSQL_PASSWORD: admin MYSQL_DATABASE: go_auth links: - "smtp" ui: build: context: . dockerfile: ./docker/vue3/Dockerfile ports: - 8080:8080 volumes: - ./ui:/app command: npm run serve mysql: image: mysql:5.7.22 environment: MYSQL_ROOT_PASSWORD: admin MYSQL_USER: admin MYSQL_PASSWORD: admin MYSQL_DATABASE: go_auth ports: - "3306:3306" volumes: - ./mysql/data:/var/lib/mysql - ./mysql/my.cnf:/etc/mysql/conf.d/my.cnf - ./mysql/sql:/docker-entrypoint-initdb.d phpmyadmin: image: phpmyadmin/phpmyadmin environment: - PMA_ARBITRARY=1 - PMA_HOST=mysql - PMA_USER=admin - PMA_PASSWORD=admin links: - mysql ports: - 8888:80 smtp: image: mailhog/mailhog ports: - "1025:1025" - "8025:8025" |
Vue.jsの環境準備
Vue CLIを使うと開発に必要なファイルなどを自動生成してくれるので、これを使います。ちなみにVue.jsのバージョンは、「3」を選択します。
もしかしたらバージョンが古い可能性もあるので、以下のコマンドでバージョンを上げておいてください。
|
1 2 |
# 最新版 yarn global add @vue/cli |
Vue.jsのアプリケーションを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
# ルートにいることを確認 $ pwd .../auth-with-golang-vue3 # uiプロジェクトを作成 vue create ui # 以降設定を選択する # Manually select features を選択 ? Please pick a preset: todo-app (babel, typescript, router) default (babel, eslint) ❯ Manually select features # ◉になっている箇所を選択 ? Check the features needed for your project: ◉ Choose Vue version ◉ Babel ◉ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ❯◉ Vuex ◯ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing # vue3を選択 ? Choose a version of Vue.js that you want to start the project with 2.x ❯ 3.x (Preview) # Noを回答 ? Use class-style component syntax? (y/N) N # Yesを回答 ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX )? (Y/n) Y # Yes回答 / ESLint with error prevention only 選択 ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y ❯ ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier TSLint (deprecated) # Lint on save選択 ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selectio n) ❯◉ Lint on save ◯ Lint and fix on commit # In package.json 選択 ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ❯ In package.json # Noを選択 ? Save this as a preset for future projects? (y/N) N |
ここまで作業を終えるとuiフォルダが作成されます。
main.go
main.goも簡単に実装しておきます。
|
1 2 3 4 5 6 7 |
package main import "fmt" func main() { fmt.Println("Hello World") } |
MySQLの設定
DBは、MySQLを使用します。
my.conf
|
1 2 3 4 5 6 |
[mysqld] character-set-server=utf8mb4 collation-server=utf8mb4_unicode_ci [client] default-character-set=utf8mb4 |
Docker コンテナの立ち上げ
以下のコマンドで、Dockerコンテナを立ち上げてみましょう。
|
1 2 |
# コンテナ立ち上げ docker-compose up |
コンテナが立ち上げ後、「http://localhost:8080/」にアクセスしてください。
コンソールから、main.goの結果が確認できます。
|
1 2 3 |
api_1 | [00] Killing service api_1 | [00] Starting service api_1 | [00] Hello World |
ここまでで環境構築は、完了です。
お疲れ様でした!^^
次回
次は、Go言語でバックエンド処理を実装します。
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。