Vue RouterでURLに#(ハッシュ)が付いてしまう
export default new Router({ mode: 'history', routes: [ { path: '/', name: 'Index', component: Index } ] })
こんな感じで
routerの設定をしているファイルで
mode:'history'
を追加してあげると解決する。
ただしサーバーの設定次第では、ユーザーがブラウザで直接 http://example.com/user/id（例）などにアクセスするとエラーになる場合がある。
この場合、catch-all フォールバックのためのルートをサーバー側で追加して対処出来る。
公式document参照 router.vuejs.org
ブログをGatsbyJS+Netlifyからはてなブログへ引っ越した
タイトルのままなんですが、ブログを引越ししました。
GatsbyJS + Netlifyというナウなヤングにバカうけな感じから、それほどモダンでは無いはてなブログへの引越しです。
記事を書くこと以外に意識が行くのが嫌だった
理由はこれに尽きます。
React.jsやGraphQLの勉強にもなったり、ページ遷移が爆速だったりとすごく魅力的な面もありました。
しかし、色々なカスタマイズやメンテナンスが必要でそこに労力を注いでまって「記事を書く」力が奪われているような気がしてくるようになりました。
素のテーマをいじってたんですが、ページング、前後記事へのリンク、タグなどもないんですよね。
あとはコメント機能が普通にやってると付けれないので外部サービスを使う必要があったり...面倒なところも正直多かったです。
新しい技術の勉強は、ブログ以外のところでやろうかと思います。
ポートフォリオサイトとか作るときは何か新しい技術使いたいですね。
はてなブログは良いです
Gatsby以前はwordpressしか使ったことがなかったので実ははてなブログを使うのは始めてです。
使ってみると色々な人が使っている理由が分かります。
という訳でしばらくははてなブログにお世話になることになりそうです。
AWS認定ソリューションアーキテクトアソシエイト(2018年2月版) 合格体験記
2018年8月にAWS認定ソリューションアーキテクトアソシエイトというイカした資格試験に合格したので、それについての体験記を書きたいと思います。
自分のAWS暦など
Webエンジニアとして働いていますが、普段はオンプレ環境でありクラウドと関わることはほぼありません。 あと普段の業務ではフロントエンド8割、バックエンド2割くらいで全くインフラエンジニアではありません。
専門では無いとはいえ、この時代にクラウドの知識が無い事に危機感を覚えたのと、AWSに付いている1年の無料枠に釣られて自分のサイトなどをレンタルサーバーからAWSのEC2に引越したのが2018年の5月頃でした。
これを機にAWSに興味を持ったので、せっかくだから資格も取るかと思って受験しました。
ちなみに15,000円くらい掛かります、僕は自腹で払いました。
会社が負担してくれるとかいうところはリアルガチで羨ましいやで...。
まずは定番の教材
AWSの資格試験に関する記事を見てみると100%と言っていい程紹介されているこの本です。
合格対策 AWS認定ソリューションアーキテクト ?アソシエイト
- 作者: 大塚康徳
- 出版社/メーカー: リックテレコム
- 発売日: 2016/10/14
- メディア: Kindle版
- この商品を含むブログを見る
2016年発売なので時代遅れになっている部分はありますが、とりあえず導入として読んでおくと基本的なことが分かるので良いです。
Udemyの模擬試験を購入
これについては過去記事があるのですが、僕がその次に取り組んだのは、Udemyで購入することが出来るAWS試験の模擬問題でした。
タイミングが合えば1000円代で購入できます。
良いところ
・6回分の模擬試験が入っているのでお得
・回答に公式ドキュメントのリンクがあるのが嬉しい
・2018年2月verにちゃんと対応してくれている
悪いところ
・全部英語
・実際の試験より、やや問題文が冗長な印象だった
こんな感じでした。
全部英語というのは、ついでに英語の勉強も出来るのでメリットと言えなくもないですね。
僕は受験を決めてからそれなりに時間があったので、英語の勉強も兼ねてやりました。
この模擬問題を確か3週しました。
公式模擬試験
最後に公式の模擬試験に望みました。
問題数は実際よりもかなり少なく、解答・解説など一切なしというやや不親切な作りです。
しかし、やはり公式の問題が一番信頼できるだろうということで受験しておきました。
結果は、7割ちょいで一応合格水準に達していました。
そして本番へ
福岡での受験でしたが、都会の街中のマンションの一室のような場所で受験しました。
英語でのやり取りが必要になるなんてクレイジーな噂をどこかで見掛けた気がしますが、そんなことはなく全て日本語でした。
時間は120分ありますが、これはかなり余裕のある時間設定だと思います。
自分の場合は60分と少しでとりあえず解き終わりました。
ゆっくり問題を読んだり、迷ったら考える時間は十分あります。
結果がすぐに出るので怖い
試験を終えると即合否がバーンと出るので怖いです。 この時点では点数などは出ず、合否のみだったと思います。
そして......無事合格でした。
実は結構予想していた問題と違う傾向のところがあって焦りましたが何とかセーフだったようです。
後日点数を見ると74%でした。
72%で合格らしいのでかなりギリギリです。
新版と旧版の難易度
本番は新版しか受けていないので何とも言えないのですが、模擬試験は旧版も受けました。
その感じから言うと、試験の基本的な難易度は変わってないとしても、情報の手に入りやすさなどを含めたら新版の方が相対的に難しくなっているのではないかと思いました。
AWSのサービスは大きくなりつづけているし、数年前の情報だと既に古かったり間違ってたりします。
新版の旧版の違いに関しては、こちらの方の記事がよくまとまっています。
https://snofra.hatenablog.com/entry/2018/07/10/191243
まとめ
何だかんだ受かって良かった！
自分はインフラ周りの実務経験がほぼなく、その辺りに若干のコンプレックスや弱点を感じていたのでこれで少し自信が付きました。
AWSの基本的知識の整理や力試しにおすすめです。 補足で、個人的に重要そうなとこをメモった過去記事も置いておきます。
CSSにdisplay:flex;を指定すると、子要素の画像が勝手に縮小される
色々良い感じにやってくれるflexだけど、画像を勝手に縮小してしまうことがある
<div class="flex_box"> <p><img src="./sample.jpg" alt="説明"></p> <div> 何か長い文章 </div> </div> <styles> .flex_box { display: flex; } </styles>
こんな感じにしていると、要素の横幅次第では画像が勝手に縮小されることがあります。
これが起こるのはテキストの部分が長文であるときです。
子要素に
.flex_box p { flex: none; }
こんな感じでflex:none;を指定すると想定通り通常サイズで画像が表示されます。
スマホでストリートビューを操作するとページ下部に飛ばされてしまうバグ
ios環境でのストリートビューでバグを発見
iphoneでストリートビューを見て、その上でドラッグ・スクロールの動作をするとページ下部などに飛ばされてしまう。 これはios固有のバグらしく、この記事を書いている時点では特にgoogleは対策してくれていない。
自分の見ているサイト特有のものかと思ったが大体どこのサイトでも同様の現象が起きていた。
cssで応急処置
body,html {
height:100%;
overflow:auto;
-webkit-overflow-scrolling: touch;
}
無理やりな感じもするけど、こんな感じのcssでひとまず解決出来る。
スマホのページが横揺れするような場合だとこれでも少しおかしかったりするので
overflow-x: hidden;
も付け加えてやると正常に動作するようになった。
Circle CIでAWS S3へのデプロイを自動化
GitHubへpushすると、自動でS3へのデプロイされるようにする
S3でホスティングしている静的サイトを更新するとき、 いちいちAWSのコンソールを開いてファイルをアップロードするのはとてつもなく面倒なので、
上記の流れでgit pushをするとS3へ自動でデプロイされるようにした。
Circle CIに登録しよう
GitHubと連携する + プロジェクト作成
簡単に連携できるようになっているのでポチポチしてGitHub側でも連携を許可するだけ。 さらに今回自動デプロイを行いたいリポジトリを「Add projects」から選択して情報を入力。
AWSの認証情報をCircleCIへ渡す
SECRET、ACCESS KEYをCircle CI側に渡す必要があります。 安全上権限は最小限のものにしておきましょう。
下の画面で言うと、「metronome」などのプロジェクト名の右にある歯車からそのプロジェクトの設定に飛びます。
その後下の方にある「AWS permissions」から情報を入力します。
便利なDocker imageを使おう
innovater japanさんがとても便利なdocker imageを配布してくださっているので使います。
自分でもっと細かく設定したい人は自分でイメージを作ってください。
使い方としてはリポジトリのルートに.circleciディレクトリを作成→中にconfig.ymlを配置。
「example.com」は自分のバケットネームに合わせましょう。
以下の例ではMasterブランチにpushがあった場合、s3へデプロイという設定になります。
version: 2
jobs:
build:
working_directory: ~/example
environment:
- AWS_S3_BUCKET_NAME: example.com
docker:
- image: innovatorjapan/awscli:latest
steps:
- checkout
- run:
name: Deploy to Mainplace if branch is Master.
command: |
if [ "${CIRCLE_BRANCH}" == "master" ]; then
aws s3 sync ./public_html s3://example.com/metronome/ --exact-timestamps
fi
- run:
name: Deploy to Developplace if branch is Develop.
command: |
if [ "${CIRCLE_BRANCH}" == "develop" ]; then
aws s3 sync ./public_html s3://example.com/develop/ --exact-timestamps
fi
こんな感じの「config.yml」ファイルをおきます。
この例だと、リポジトリの内の「public_html」ディレクトリ内のファイルをデプロイします。
masterブランチにpushされた場合は「example.com」というバケットの「metronome」ディレクトリ以下にデプロイ、 developブランチだと「develop」ディレクトリ以下にデプロイされるという感じです。
この設定ファイルの細かいところは各自の用途・環境に合わせてください。
おわり
以上で、Cricle CIを利用して GitHub→s3 への自動デプロイが完了です。
steps: の部分でテストを入れることも出来ますね。後は好みでカスタマイズしましょう。
Docker for Windowsで「No connection could be made...」エラー
Docker for windowsを使おうとしたらこんなエラーが出た
ある日dockerが正常に動作せず、docker run hello-world も何も出来ない状態になった。
error during connect: Get https://192.168.99.100:2376/v1.37/version: dial tcp 19 2.168.99.100:2376: connectex: No connection could be made because the target mac hine actively refused it.
docker-machine lsをしてみると、このエラーがerror欄に表示される。
Docker-machineを削除して作成しなおした
原因を突き止めようと思ったけど、とうとう分からなかったので仕方なく一度docker-machineを削除して作成しなおしたら直った。
削除→再作成
$ docker-machine rm default $ docker-machine create default --driver virtualbox
環境変数を指定
$ eval \"$(docker-machine env default)"\
$ eval $("C:\Program Files\Docker Toolbox\docker-machine.exe" env default): No such file or directory
$("")内はそれぞれのパスに合わせてください。
原因がハッキリしなかったので少し気持ち悪いけど、とりあえず応急処置ということで...。
こういう時は一旦やり直すと何となく上手くいったりしますね。
