現在プライベートで作っているWEBサービスのフロントエンドを作るにあたって、Vue.js＋TypeScriptを試してみることにした。 基本的には公式サイトを参照させていただいた。 作るもの メモを編集する画面を作成する。 初期表示 メモ表示欄とEDITボタンが表示されている メモ表示欄にはメモ取得APIで取得したメモの内容を表示する APIで取得する内容はこんな感じ。{ id: 123, body: "これはサンプルです"} EDITボタンクリック 表示欄＋EDITボタンを非表示にし、編集欄（textarea）＋SAVEボタンを表示する SAVEボタンクリック 編集欄＋SAVEボタンを非表示にし、表示欄＋EDITボタンを表示する メモ保存APIでメモを保存する プロジェクト作成 npmのインストール 以前記事を書いたのでこちらを参照のこと。 node.jsおよびnpm Continue Reading
2020年6月追記：記事の内容がだいぶ古くなっていたので、最新の情報に見直しました。 Vue+TypeScriptで作ったフロントエンドアプリの見た目をよくしたかったので、Vuetifyを導入しました。 Quick Startにいっぱい書いてあって、どれをどうやればいいかが結構分かりにくかったので、導入手順を記載しておきます。 インストール こちら にしたがって導入をします。 VuetifyのUI Componentを利用する箇所で毎回moduleをimportしなくても、自動的にimportしてくれる vuetify-loader を利用するケースについて記載しています。 依存ライブラリを追加します。 npm install –save vuetify npm install –save-dev sass sass-loader fibers deepmerge -D npm ins Continue Reading
ローカル開発用にDocker Comnposeで動かしているNginxをHTTPS対応する必要が出てきたので、自作のSSL証明書を使って対応することにした。 opensslで秘密鍵、署名リクエスト、SSL証明書を作成 sslというフォルダを作成する mkdir ssl cd ssl 秘密鍵（KEY）を作成する 暗号にはRSA 2048ビットを使用する。 openssl genrsa 2048 > server.key 署名リクエスト（CSR）を生成する SSLサーバ証明書発行に必要なテキストデータで、認証局はこのテキストデータを元に内容を精査してSSL証明書を発行するらしい。（今回は自作するので適当でOK） openssl req -new -key server.key > server.csr > Country Name (2 letter code) []:81 > S Continue Reading
たまに使うLinuxコマンドやスクリプトを随時メモしていく予定です。 ターミナルからログアウトしてもコマンドを動かし続ける とても処理時間がかかる処理を実行する際に、ネットワークが切れたりして処理が停止するのを避けたいときに使います。 # nohupでhangupシグナルを無視し、バックグラウンドで実行させる nohup コマンド & nohup pg_dump -h localhost -p 5432 -U admin -Fc -f hoge.dmp hoge & # ジョブの確認・停止・再開などは通常と同じ バックグラウンド実行、フォアグラウンド実行 # バックグラウンドで実行する コマンド & sar 5 555 & > [2] 9095 > Linux 5.4.0-1025-gcp (stg-scraper01) 2020年10月01日 _x86_6 Continue Reading
最初は、KtorでAPIサーバを作るにあたり、公式ページ を参考にバックエンドでGoogle OAuth認証を行う実装を行なった。 しかし、フロントエンドからAPIを呼び出した際に、 フロントエンド => バックエンド => (redirect) => account.google.com の様な流れで、CORSエラーが発生することが分かった（詳細はこちら）。 リバースプロキシでフロントエンドとバックエンドのドメインを統一してみてもうまく解決できず、結局公式で紹介されているGoogle OAuth認証は諦め、自前で認証処理を実装することにした。 処理の流れ フロントエンド側の実装 package.json vue-google-oauth2の依存関係を追加する。 "dependencies": { "vue-google-oauth2&quo Continue Reading
ローカル環境で開発中の複数アプリサーバのドメインを統一する必要が出てきたので、Docker Composeを使ってNginxでリバースプロキシを立てることにした。 実現したいこと http://rinoguchi.io/hoge –proxy–> http://localhost:8080 http://rinoguchi.io/fuga –proxy–> http://localhost:8081 モチベーション Dockerで立ち上げた複数アプリサーバを、Docker Composeを使ってNginxでリバースプロキシする話は結構あるのだが、Dockerを使わず立ち上げたアプリサーバの話は発見できなかった。 個人的には、開発対象のアプリケーションはAutoReloadが効かなくなるのでDockerでは立ち上げない方が良いと考えている。なので、今回Dockerを使わず Continue Reading
別ドメインへの302 redirectを返す別ドメインのAPIを呼び出すとCORSエラーが発生することがわかった。 説明が難しいのだが、自分の具体的なケースを書くと、 ドメインA（フロントエンドサーバ）からドメインB（バックエンドAPIサーバ）のAPIを呼び出す APIがGoogle OAuth認証のためにドメインC（account.google.com）への302 Redirectを返す CORSエラー発生 という流れで、以下のエラーが発生した。 Access to XMLHttpRequest at 'https://accounts.google.com/o/oauth2/auth?client_id=**********.apps.googleusercontent.com&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2F Continue Reading
npmを使う必要があったので、とりあえず調べて使い方をまとめた。今後もTipsを追加していく。 インストール方法 nodebrewをインストール brew install nodebrew Node.jsおよびnpmをインストール # インストール可能なバージョン一覧を取得 nodebrew ls-remote # install-binaryを配置するフォルダを作成 mkdir ~/.nodebrew/src # インストール nodebrew install-binary v12.2.0 nodebrew install-binary latest # 最新バージョン # インストール済みのバージョン一覧表示 nodebrew ls # 特定のバージョンのnodeを有効化する nodebrew use v12.2.0 # nodeコマンドにPATHを通す vi ~/.bash_prof Continue Reading
Ktor で Locations を使う際、普通にForm DataとしてPOSTすると404エラーになってしまう。 GET parametersの項 を参照すると、サポート対象の機能のはずなのに。 ちなみに、 Issue #601 もあがっているが、半年以上放置されている。自分もコメントを追加しておいた。 ここでは残念な方法ではあるが、いくつか回避策があるので、その方法を記載しておく。 エラーになるパターン このケースのように、Form Dataとしてパラメータを受け取ろうとすると、404エラーになってしまう。 @Location("/hoge") data class HogeParamater(val param1, val param2) routing { post<HogeParamater> { param -> // HogeParam Continue Reading
今月から家庭の事情でノマドワークをすることになったのだが、コワーキングスペースで黙々と仕事をするのも性に合わないので、横浜近辺のカフェを巡りながら仕事をすることを前提に、最軽量・高効率のノマドワーク装備を整えることにした。（主にこだわったのは最軽量の方。わざわざ晒すほどの物でもないかもしれないww） 最終的な装備 装備一覧 装備品 説明 純正品重量 商品重量 リンク 13インチMacBook Pro 今後はTouch Barモデルに集約されることが予想されるので、慣れるためにTouch Barモデルを導入。CPUは第八世代の2.3GHzクァッドコア。メモリだけ16GBに。ヨドバシカメラで購入し8%ポイントバック。Chromeのタブを10くらい開き、DockerでDBコンテナを立ち上げ、IDEAプロジェクトを2つ開き、Nettyでアプリを立ち上げ、VS Codeを開いていても、性能面で問題を Continue Reading
