氷河(Glacier)に眠っている写真たちをサルベージする 〜 その1 環境構築

# はじめに
　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を以下のように書き換える。
```react: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を以下のように書き換える。
```json:package.json
"scripts": {
  "dev": "next dev -p 4000",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}
```
13\. src/app/api/test/route.tsを作成する。
```react: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` にアクセスする。

![Screenshot from 2024-03-25 05-32-44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3748326/5bfb7f69-2822-3dd9-f620-f4af78d914f3.png)

## バックエンド
1\. yarn devを実行する。
```
yarn dev
```
ブラウザを開き、`http://localhost:4000/api/test` にアクセスする。

![Screenshot from 2024-03-25 05-24-31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3748326/9082fc36-ef92-7096-338d-e1247ffb2b6b.png)

その2に続く。

https://qiita.com/sat0sh1kawada/items/7551c141f0f04585bab3