Go on YAGI BLOG

Next.js(React),Go kit(Golang)で「SENRYU」を個人開発した

Sun, 20 Sep 2020 22:04:18 +0900

今回はじめて個人開発でアプリを作りました！！今年の1月に個人開発をしようと考えてから、アプリ企画・技術選定をして、開発途中で作るアプリを変えたりと色々と迷走しましたが、なんとか一区切りつきました！！（8か月ぐらいかかるなんてチンタラやってたなあ（笑））

開発したアプリや今まで考えていたことなどをまとめます。

アプリ概要

川柳を共有することができるSNSアプリ「SENRYU」を開発しました。

機能

ログイン
ユーザー登録
ログアウト
川柳一覧表示
マイ川柳一覧表示
川柳投稿

フロントエンド

Next.js(React)

フロントエンドにはNext.jsを利用しました。TypeScriptを使ってみたくて、TypeScriptと相性がいいReactを選択して、最近話題のNext.jsにしようと決めました。
Next.jsはルーティング設定が楽だし、SSG, SSR, SPAをページごとに設定できて便利だしと使って良かったなと思っています。ただ、認証はFirebaseやNextAuth.jsを利用して他のSNSアカウントとかでログインする実装にするのが楽だと感じました。

Material-UI

ReactのUIコンポーネントライブラリであるMaterial-UIを利用してUIの基礎を作りました。簡単に見た目を整えることができるので、とても便利です。

styled-components

Material-UIの見た目を調整したい時にCCS in JSのstyled-componentsを利用しました。TypeScript内でCSSを書けるので普段CSSとかを書かない僕には使いやすかったです。

バックエンド

Go kit(Golang)

個人的にGolangを利用したかったのとマイクロサービス構成でアプリを作ってみたいという理由からGo kitを利用しました。使ってみた感想としてあまり日本語のドキュメントとかなく調べるのが大変でしたが、Golangにはホットリロードがあってコンパイルが速く言語に慣れれば開発スピードが上がりそうだなと思いました。

データベース

MongoDB

NoSQLを利用したことがなかったので今回利用しました。MongoDBの基礎的な知識を身につけることはできましたが、RDBMSよりもNoSQLを利用するメリットがあんまりわからなかったです。

開発環境

Docker

マイクロサービス構成でアプリ開発をしていたので、それぞれのサービス毎にコンテナを作成しました。ローカルでDockerコンテナを立てて開発するときはVSCodeのRemote Containerが非常に便利でした。ぜひ使ってみてほしいです。

対象リポジトリ

senryu-frontend
senryu-user
senryu-post

記事を書くまでの経緯

元々、今年の1月に他のサービス開発を考えていました。技術選定の時には

Next.js(React)
TypeScript
Go kit(Golang)
MongoDB
Docker
Github Actions
AWS
K8s
マイクロサービス

でアプリを開発してリリースをしようと思っていました。せっかくの個人開発だし勉強もかねて挑戦してやる！っていう気持ちで技術選定をしましたが、今思うとDocker以外はほぼ経験がなかったのでめちゃくちゃ無謀だったなと思います。（笑）
そんな感じで技術選定をしてから要件や仕様決めて開発を始めましたが、わからないことが多すぎで全然進捗がなかったです。。亀の足のような遅さでしたがなんとか進めていた 4月頃か5月頃に気づいてしまいました。
「クラウドでK8s使うと金けっこうかかるやんけ！」
今思うと当たり前だし、調査不足すぎだよ自分。。ということがあり、最初に作りたかったサービスは世にリリースするのが厳しいなと思いましたが、せっかくある程度までは勉強して作っていたので、違うサービスとして開発をしてGithubで公開してポートフォリオ的な感じにしようと決めました。
といった経緯で今に至ります。結果的には個人開発したアプリをリリースすることはできませんでしたが、Next.jsとGolangを学べたり個人開発の雰囲気を味わえたので良かったです。

最後に

個人開発はすべてを自分で考えないといけないので、とても大変ですが技術選定や作業の進め方など誰からも指図されずに好きなようにできるので、楽しいし学びが多いですね。

GitHubのプライベートリポジトリをgo getする

Mon, 27 Apr 2020 20:01:04 +0900

個人開発していて、GitHubの自分のプライベートリポジトリをgo getしようとして、エラーに遭遇しました。今後同じような目にあった時のために、備忘録として残します。

エラー内容

以下のようなエラーが発生しました。

$ go get github.com/<username>/<private-repository-name>

go: downloading github.com/<username>/<private-repository-name> v0.0.0-20200426100620-259de4f4dd2c
go get github.com/<username>/<private-repository-name>: github.com/<username>/<private-repository-name>@v0.0.0-20200426100620-259de4f4dd2c: verifying module: github.com/<username>/<private-repository-name>@v0.0.0-20200426100620-259de4f4dd2c: reading https://sum.golang.org/lookup/github.com/<username>/<private-repository-name>@v0.0.0-20200426100620-259de4f4dd2c: 410 Gone
	server response:
	not found: github.com/<username>/<private-repository-name>@v0.0.0-20200426100620-259de4f4dd2c: invalid version: git fetch -f origin refs/heads/*:refs/heads/* refs/tags/*:refs/tags/* in /tmp/gopath/pkg/mod/cache/vcs/d99582f38bf8799347c5c3580859733d5d5c417fd23feb23ec82dc0787605157: exit status 128:
		fatal: could not read Username for 'https://github.com': terminal prompts disabled

原因

go getでモジュールをダウンロードする際は通常、http通信をしているみたいです。 GitHubのプライベートリポジトリへは認証が通らず、エラーになっていました。

解決方法

以下手順で解決できます。

Personal access tokensを作成
git config設定

1. `Personal access tokens`を作成

GitHubのDeveloper settings画面でトークンを作成できます。設定画面を開いたら、「Generate new token」を押すと、以下の画面が表示されます。

React + Go + MongoDBの環境をDocker Composeで作成した

Sat, 11 Apr 2020 12:51:41 +0900

現在、勉強がてら個人開発をしていて、せっかくの個人開発なので、今までさわったことがないReact, Go, MongoDBでwebアプリを作ります。その最初の段階として、Docker Composeを使って環境構築を進めます。

Reactの環境構築

今回の開発では、プロジェクト配下をこんな感じにしています。

プロジェクト
├── backend
├── frontend

Reactはfrontend配下に構築します。

`Dockerfile`の作成

DockerfileにDocker上で起動させるコンテナの構成情報を書きます。 frontend配下に以下内容で作成します。

FROM node:13.12.0-alpine3.10
WORKDIR /usr/src/app

1行目にはコンテナのDockerイメージ、2行目にはコンテナ内の作業ディレクトリを記載しています。 alpineはAlpine Linuxのことで、必要最低限の構成がされているおかげで、Dockerイメージの軽量化を図ることができます。

`docker-compose.yml`の作成

docker-compose.ymlで複数のコンテナをまとめて起動することができます。拡張子は「.yml」「.yaml」どちらでも動きます。 ~~どっちかに統一してくれればいいのに。~~
プロジェクト配下に以下内容で作成します。

version: '3'
services:
    node:
        build:
            context: ./frontend
            dockerfile: Dockerfile
        volumes:
            - ./frontend:/usr/src/app
        command: sh -c "yarn start"
        ports:
            - "3000:3000"

volumesではコンテナ内のusr/src/appをfrontendに永続化させます。 portsでは外部の3000ポートとコンテナ内の3000ポートをつなげています。ローカル環境ではlocalhost:3000でアクセスができるようになります。

Dockerイメージのビルド

docker-compose.ymlのある階層で以下コマンドを叩きます。

docker-compose build

Building node
Step 1/2 : FROM node:13.12.0-alpine3.10
 ---> b529a862f234
Step 2/2 : WORKDIR /usr/src/app
 ---> Using cache
 ---> b753b92fbf97
Successfully built b753b92fbf97
Successfully tagged プロジェクト名_node:latest

上記のような表示がされ、ビルドすることができます。

GoでインストールからHello Golang！！

Mon, 16 Mar 2020 22:22:38 +0900

本記事は以前Qiitaに投稿した内容を本ブログに持ってきています。

概要

MacにGoをインストールして、「Hello Golang！！」を表示させるところまでを解説していきます。
また、僕はシェルにfishを使っているので、fish向けの環境構築についても記載します。

環境

macOS Catalina 10.15.1
Homebrew 2.1.15
fish 3.0.2

Goインストール

$ brew install go

$ go version
go version go1.13.3 darwin/amd64

Homebrew使うとコマンド一つでインストールできるので、とても便利です。

GOPATHの設定

GOPATHとは、Goのソースをまとめているディレクトリを指定している環境変数のことであり、 GOPATHを利用することで、外部ライブラリの導入やビルド作業を非常に簡単に行うことができます。

bashでGOPATHを指定するには、

$ vim ~/.bash_profile

で設定ファイルに以下追記をします。

export GOPATH=$HOME/go（←ワークスペースにしたい場所）
export PATH=$PATH:$GOPATH/bin

僕のようにシェルにfishを使っている人は、

vim ~/.config/fish/config.fish