AWS CodeArtifact を使用して複数の Vue プロジェクトでコードを共有する

1. はじめに

複数のプロジェクトを開発する際、似たようなビジネスロジックに直面することがよくあります。例えば、Project A と Project B の両方で、特定の文字列処理が必要になる場合があります。

このような重複したコードをどのように管理すればよいでしょうか？一つの方法として、Project A と Project B に同じロジックを個別に実装することが考えられますが、これではコードの冗長性が増し、プロジェクトの成長に伴ってメンテナンスコストも増加してしまいます。

より良い解決策として、これらの共通コードを独立した npm パッケージとしてパッケージ化し、Project A および Project B に npm install を使用してインストールする方法があります。これにより、共通コードの管理と更新が容易になります。

しかし、AWS 環境では、セキュリティの観点から npm の公開リポジトリを直接使用することは避けるのが一般的です（たとえ npm がプライベートリポジトリ機能を提供していたとしても）。AWS では、プライベート npm リポジトリとして CodeArtifact を提供しており、複数のプロジェクト間でコードを安全に共有できます。

本記事では、AWS CodeArtifact を使用して複数の Vue プロジェクト間でコードを共有する方法について解説します。

2. AWS CodeArtifact を作成する

2.1 Domain の作成

まず、AWS コンソール で CodeArtifact の Domain（ドメイン）を作成します。ここでは hushukang-repo という名前で作成します。

createdomain

⚠️ 注意：同じ AWS リージョン内では、1 つの CodeArtifact ドメインしか作成できません。

2.2 Repository の作成

次に、Domain 内に Repository（リポジトリ）を作成します。ここでは common-ui という名前で作成します。

createrepository

リポジトリを作成する際、Public upstream repositories のオプションがあります。これを設定しない場合、フロントエンドプロジェクトでは npm 公開リポジトリ と CodeArtifact の両方から依存関係を取得することになります。

03_npm_install_01

しかし、Public upstream repositories を npm-store に設定すると、CodeArtifact は npm 公開リポジトリ に直接アクセスするための npm-store というプロキシリポジトリを自動的に作成します。この設定を行うことで、すべての依存関係を CodeArtifact を通じてインストールできるようになります。

04_npm_install_02

2.3 Repository に接続する

ローカル開発環境から CodeArtifact Repository に接続するには、以下のコマンドを使用します。

07_connection

ステップ 3 で、AWS が提供する aws codeartifact login コマンドを使用します。

aws codeartifact login --tool npm --repository <repository_name> --domain <domain_name> --domain-owner <aws_account> --region <aws_region>

コマンド実行後、以下のメッセージが表示されれば、正常に接続されています。

Successfully configured npm to use AWS CodeArtifact repository https://-.d.codeartifact..amazonaws.com/npm//
Login expires in 12 hours at 2025-02-10 05:01:57+09:00

3. 共通コンポーネントプロジェクトの作成

3.1 Vue プロジェクトの初期化

まず、Vite を使用して Vue コンポーネントライブラリプロジェクトを作成します。

# npm 7+, extra double-dash is needed:
npm create vite@latest common-ui -- --template vue-ts

次に、package.json の dependencies を peerDependencies に変更し、Vue のバージョン競合を防ぎます。

"peerDependencies": { // <- dependencies
  "vue": "^3.5.13"
}

なぜ peerDependencies を使用するのか？ プラグインを開発する際、ホスト環境の特定のライブラリに依存する場合は peerDependencies を使用することで、重複した依存関係のインストールを防げます。

また、package.json に以下のフィールドを追加します。

{
  "name": "@hushukang/common-ui", // この名前は発行後のファイルの名前で、 npm install @hushukang/common-ui を使用して発行後のファイルをダウンロードする
  "version": "0.0.0",
  "main": "dist/common-ui.umd.js",
  "module": "dist/common-ui.es.js",
  "types": "dist/index.d.ts",
  "type": "module",
  "files": ["dist"]
  // other config
  // ...
}

3.2 TypeScript の設定

プロジェクトを作成した後、ルートディレクトリに tsconfig.build.json ファイルを追加し、次の内容を記述します。この tsconfig は CodeArtifact に公開するためのコードを生成するためのものです。

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "declaration": true, // 宣言ファイルを生成する
    "declarationMap": true, // 宣言ファイルの Source Map を生成する
    "emitDeclarationOnly": true, // 宣言ファイルのみを生成し、JS ファイルは生成しない
    "outDir": "./dist", // 出力ディレクトリ
    "module": "ESNext", // モジュールの種類（Vite と一致）
    "target": "ES2022", // 目標 ECMAScript バージョン
    "strict": true, // 厳格モードを有効にする
    "skipLibCheck": true // ライブラリチェックをスキップして速度を向上させる
  },
  "include": ["src/**/*.ts", "src/**/*.vue"], // TS および Vue ファイルを含める
  "exclude": ["node_modules", "dist"] // 含めないファイルやディレクトリ
}

3.3 Vite の設定

vite-plugin-dts をインストールし、.d.ts 宣言ファイルを生成します。

npm i -D vite-plugin-dts

vite.config.ts に以下を追加します。

import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    dts({
      outDir: 'dist', // 生成されたファイルのディレクトリ
      insertTypesEntry: true, // エントリーの型宣言ファイル index.d.ts を生成
      tsconfigPath: 'tsconfig.build.json', // tsconfig のパス
    }),
  ],
  build: {
    lib: {
      entry: './src/index.ts',
      name: 'CommonUI',
      fileName: (format) => `common-ui.${format}.js`,
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
});

3.4 UI コンポーネントの作成

src/components フォルダ内に HelloWorld.vue コンポーネントを作成し、以下の内容を追加します。

<script setup lang="ts">
  defineProps({
    msg: String,
  });
</script>

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

次に、src/components フォルダ内に index.ts ファイルを作成し、以下の内容を追加します。

export { default as HelloWorld } from './HelloWorld.vue';

さらに、src フォルダ内に index.ts ファイルを作成し、以下の内容を追加します。

export * from './components';

この時点で、フォルダ構成は以下のようになります。

|-- src
|   |-- components
|   |   |-- HelloWorld.vue
|   |   |-- index.ts
|   |-- index.ts
|-- package.json
|-- tsconfig.app.json
|-- tsconfig.build.json
|-- tsconfig.json
|-- tsconfig.node.json
|-- vite.config.ts

4. コンポーネントライブラリのビルドと公開

npm run build を実行して dist ディレクトリを生成し、次のコマンドで AWS CodeArtifact に公開します。

# AWS CodeArtifact にログイン
aws codeartifact login --tool npm --repository <repository_name> --domain <domain_name> --domain-owner <aws_account> --region <aws_region>

# パッケージを公開する
npm publish

5. プロジェクトでコンポーネントライブラリを使用する

Project A または Project B で次のコマンドを実行し、コンポーネントライブラリをインストールします。

# AWS CodeArtifact にログイン
aws codeartifact login --tool npm --repository <repository_name> --domain <domain_name> --domain-owner <aws_account> --region <aws_region>

# common-uiをインストールする
npm install @hushukang/common-ui

Vue コンポーネントで使用する例：

<script setup lang="ts">
  import { HelloWorld } from '@hushukang/common-ui';
</script>

<template>
  <HelloWorld msg="Hello World" />
</template>

6. まとめ

AWS CodeArtifact を使用することで、複数の Vue プロジェクト間で安全かつ効率的にコンポーネントライブラリを共有し、コードの重複を削減し、メンテナンス性を向上させることができます。