はじめに
6年前、撮りためていた十数年分の写真のバックアップを模索していて、興味本位でAmazon S3 Glacierにバックアップを取っていたが、後になって取り出し方が簡単ではないことがわかり、これまで何度かGlacierからの写真の取り出しを試みたがことごとく挫折した（Javaでプログラムを組んだり、Pythonでプログラムを組んだり、AWS CLIを実行してみたり…）。
最近になって、ようやく写真の取り出し方がある程度確立できたので、ここに技術メモとして残す。Macで試しに作成したものをUbuntuに移植したものとなる。
実行環境
- Ubuntu 22.04 LTS
- Node.js
- MongoDB
- AWS CLI
- Next.js
手順
1. nvmのインストール
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
$ source ~/.bashrc
2. Node.jsのインストール
$ nvm install --lts
3. MongoDBのインストール
$ curl -fsSL https://www.mongodb.org/static/pgp/server-7.0.asc | sudo gpg -o /usr/share/keyrings/mongodb-server-7.0.gpg --dearmor
$ echo "deb [ arch=amd64,arm64 signed-by=/usr/share/keyrings/mongodb-server-7.0.gpg ] https://repo.mongodb.org/apt/ubuntu jammy/mongodb-org/7.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-7.0.list
$ sudo apt-get update
$ sudo apt-get install -y mongodb-org
$ sudo systemctl start mongod
4. MongoDB Compassのインストール
$ wget https://downloads.mongodb.com/compass/mongodb-compass_1.40.4_amd64.deb
$ sudo dpkg -i mongodb-compass_1.40.4_amd64.deb
5. AWS CLIのインストール
$ curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
$ unzip awscliv2.zip
$ sudo ./aws/install
6. yarnのインストール
$ npm install -g yarn
7. ツール用のディレクトリを作成し、Next.jsのプロジェクトを2つ（フロントエンド、バックエンド）作る。
$ mkdir gtools
$ cd gtools
$ yarn create next-app frontend
$ yarn create next-app backend
8. フロントエンド側のプロジェクトディレクトリに移動し、MUI、axios、React Hook Formをインストールする。
$ cd frontend
$ yarn add @mui/material @emotion/react @emotion/styled @mui/material-nextjs @emotion/cache axios react-hook-form
9. バックエンド側のプロジェクトディレクトリに移動し、@aws-sdk/client-glacier、mongodbをインストールする。
$ cd ../backend
$ yarn add @aws-sdk/client-glacier mongodb
10. aws configureを実行し、AWSアクセスキーID、AWSシークレットアクセスキー、リージョンを設定する
$ aws configure
11. フロントエンド側のプロジェクトディレクトリに移動し、src/app/layout.tsxを以下のように書き換える。
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<AppRouterCacheProvider>{children}</AppRouterCacheProvider>
</body>
</html>
);
}
12. バックエンド側のプロジェクトディレクトリに移動し、package.jsonのscriptsを以下のように書き換える。
"scripts": {
"dev": "next dev -p 4000",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
13. src/app/api/test/route.tsを作成する。
import { NextResponse } from "next/server";
export async function GET(): Promise<NextResponse> {
return NextResponse.json({ message: "OK!" });
}
動作確認
フロントエンド
1. yarn devを実行する。
yarn dev
2. ブラウザを開き、http://localhost:3000 にアクセスする。
バックエンド
1. yarn devを実行する。
yarn dev
ブラウザを開き、http://localhost:4000/api/test にアクセスする。
その2に続く。