♻️

Remix + Slack OAuthのhttpsローカル開発設定

2024/06/23に公開

Slack

Remix では yarn dev をした際に
http://localhost:5173/ のようなURLが立ち上がるかと思います。

ただ、このままだと http なので
Slack OAuth の Redirect URL に登録できないという問題があります。

割と最近こういうlocalhostでもhttpsが要求されるパターンありますね。

vite.config.ts に server を書き加えるとhttps対応になります。
yarn dev が remix vite:dev である場合を想定しています。

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
    }),
    tsconfigPaths(),
  ],
  server: {
    proxy: {},
    https: {
      key: "./certs/key.pem",
      cert: "./certs/cert.pem",
    },
  },
});

key.pem と cert.pem は mkcert を使って生成します。

% mkcert -key-file key.pem -cert-file cert.pem localhost

こういう感じで生成できると思いますね。
certs フォルダに入れるかは、好みでいいと思います。

あとは yarn dev でもすれば https で立ち上がります。

おしらせ

当方は、Slackにてプログラマコミュニティを運営しております。
本記事のように、コミュニティ内で提供している独自システムの開発時に発生した知見を記事からしております。
本記事に関する質問や交流なども行えますので、気軽にご参加を検討して頂けると嬉しいです。

おしらせ

Discussion