2021-01-19

Heroku x Route53 でルートドメインで遷移できるようにする

Heroku x Route53 でルートドメインに接続するときにハマったのでメモ

公式では以下のように説明されている devcenter.heroku.com

ドメイン名と同じS3のバケットを作る
S3を静的ホスティングの設定をして、遷移先のドメイン www.example.com にする
Route53でルートドメイン example.com のAレコードをS3のエイリアスで設定をする

だけど、こちらの方法だとhttps のリクエストが出来なかったので、 Route53 と S3 の間に CloudFront を挟む必要がある。

1. ドメイン名と同じS3のバケットを作る

2. S3を静的ホスティングの設定をする

3. 遷移先をドメイン www.example.com にする

4. プロトコルを https にする

f:id:eggpogg:20210120000524p:plain

5. 設定を保存した時に吐き出される、バケットウェブサイトエンドポイントのURLを保存する

f:id:eggpogg:20210120000528p:plain

6.バージニア北部のリージョンで example.com のACMを作成をする

f:id:eggpogg:20210120000532p:plain

7. CloudFrontを作成する

Origin Domain Name に S3 のバケットウェブサイトエンドポイントのURL を入力をする
Origin ID は自動で入力される
Alternate Domain Names に example.com を入力する
Custom SSL Certificate で作成した ACM を選択する

あとはデフォルトでも問題ない

8. CloudFront作成後に吐き出せれるエンドポイントのURLを保存する

9. Route53 にexample.com のA レコードで CloudFrontのエンドポイントにエイリアスを設定する

10分程すると http://example.com , https://example.com がそれぞれ www.example.com にリダイレクトされるようになる。

2021-01-18

prettierは改行を保持できない....ということを知った

コードを書く時に、下に長く書く事が多いタイプです。
なので、チェーンで繋いでいる時にも下に書いていきたいのですが、
prettierをformatterに使っていると、改行が保持されずに削除されてしまう...

これが

this.$store
  .state
  .map((it) => it.moge)

こうなってしまう

this.$store.state.map((it) => it.moge)

github.com

調べてみるとオプションなどもなく、prettierの実装思想からずれるみたい...

ぐぐってみると、僕とはちょっと違うけどprettier疲れをしている人がいて完全に同意と感じた qiita.com

eslintだけにしようかな...

2021-01-14

Typescript x ESLint で引数のみ使用を許可する方法

Javaでやってきた身としては、エラーではなく残しておいてほしかったので調べた。

// .eslint.js

  rules: {
    'no-unused-vars': 'off',
    '@typescript-eslint/no-unused-vars': ['error', { args: 'none' }],
  },

オプションの詳しいのはここ乗っている。
eslint.org

2021-01-13

Nuxt x TypeScriptでStoreで自作プラグインの使う方法

TypeScript Nuxtjs

this.$zisakuに返す型を定義して、interface Storeに渡してあげれば良い

// plugins/zisaku.ts

import { Plugin } from '@nuxt/types'

export interface Zisaku {
  hoge: () => void
  fuga: string
}

const zisaku = {
  hoge: () => { console.log('hoge') },
  fuga: 'fuga'
} as Zisaku

const plugin: Plugin = (context, inject) => inject('$zisaku', zisaku)

export default plugin

// types/index.d.ts

import { Zisaku } from '~/plugins/zisaku'

declare module 'vuex/types/index' {
  interface Store<S> {
    $zisaku: Zisaku
  }
}

2021-01-13

AndroidのTextInputLayoutが表示できなかった時の対応

Activityを持たないViewだけの生成で com.google.android.material.textfield.TextInputLayout を使おうと思った時に以下のエラーが発生した。

Caused by: java.lang.IllegalArgumentException: The style on this component requires your app theme to be Theme.AppCompat (or a descendant).

エラーの通りでテーマにTheme.AppCompatを指定しないといけないということだったけど Activityがない場合には、RootのViewGroupに設定を追加すればいいみたいだった。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:theme="@style/Theme.AppCompat.DayNight.NoActionBar" <--------- 追加
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textField"
        android:layout_width="match_parent"

設定したら問題なく表示された。

memo: ActivityやApplicationの追加はこちらのStackOverflowで確認できる。

stackoverflow.com

2021-01-12

nuxt x TypeScripts で $axios を読み込ませる

$axiosを読み込ませたいだけならindex.d.tsに import を追加するだけで良い

// index.d.ts
import { NuxtAxiosInstance } from '@nuxtjs/axios'

あとは、以下のあたりが自動で読み込まれて設定される

github.com

もっと細か追加したい場合は、
以下を参考にすると良さそう！ gist.github.com