Help us understand the problem. What is going on with this article?

AWS S3 にAngularアプリをデプロイする手順

① Angular アプリ作成

# Angular install
$ npm install -g @angular/cli

# Angular app create
$ ng new MyAngularApp

② AWS SDK インストール

これにより、S3と対話するクライアントを生成することができます。
※これ以前のAWSCLIのインストール手順は省略します。

$ cd MyAngularApp
$ npm install aws-sdk --save-dev

③ MIMEタイプ設定

S3にアップロードされるすべてのファイルについて、適切なMIMEタイプを設定する必要があります。指定されていない場合、S3はデフォルトで 'application / octet-stream'になり、ブラウザによって解釈されレンダリングされる代わりにファイルがダウンロードされます。ファイルをそれぞれのMIMEタイプに手動でマッピングするのを避けるために、ここではヘルパーライブラリをインストールします。

$ npm install mime-types --save-dev

④ 展開スクリプト作成

しましょう。これはnpm実行スクリプトによって呼び出され、ノードによって解釈され実行される単純なJavaScriptファイルです。今のところ、プロジェクトのルートレベルに「scripts」という名前の新しいフォルダを作成してください。このフォルダの中にファイル名「deploy.js」を作成します。
'./scripts/deploy.js'

const AWS = require("aws-sdk"); // imports AWS SDK
const mime = require('mime-types') // mime type resolver
const fs = require("fs"); // utility from node.js to interact with the file system
const path = require("path"); // utility from node.js to manage file/folder paths

// configuration necessary for this script to run
const config = {
    s3BucketName: 'ここにS3のバケット名を入れてください',
    folderPath: '../dist' // path relative script's location
  };

// initialise S3 client
const s3 = new AWS.S3({
    signatureVersion: 'v4'
});

// resolve full folder path
const distFolderPath = path.join(__dirname, config.folderPath);

// Normalize \\ paths to / paths.
function unixifyPath(filepath) {
    return process.platform === 'win32' ? filepath.replace(/\\/g, '/') : filepath;
};

// Recurse into a directory, executing callback for each file.
function walk(rootdir, callback, subdir) {
    // is sub-directory
    const isSubdir = subdir ? true : false;
    // absolute path
    const abspath = subdir ? path.join(rootdir, subdir) : rootdir;

    // read all files in the current directory
    fs.readdirSync(abspath).forEach((filename) => {
        // full file path
        const filepath = path.join(abspath, filename);
        // check if current path is a directory
        if (fs.statSync(filepath).isDirectory()) {
            walk(rootdir, callback, unixifyPath(path.join(subdir || '', filename || '')))
        } else {
            fs.readFile(filepath, (error, fileContent) => {
                // if unable to read file contents, throw exception
                if (error) {
                    throw error;
                }

                // map the current file with the respective MIME type
                const mimeType = mime.lookup(filepath)

                // build S3 PUT object request
                const s3Obj = {
                    // set appropriate S3 Bucket path
                    Bucket: isSubdir ? `${config.s3BucketName}/${subdir}` : config.s3BucketName,
                    Key: filename,
                    Body: fileContent,
                    ContentType: mimeType
                }

                // upload file to S3
                s3.putObject(s3Obj, (res) => {
                    console.log(`Successfully uploaded '${filepath}' with MIME type '${mimeType}'`)
                })
            })
        }
    })
}

// start upload process
walk(distFolderPath, (filepath, rootdir, subdir, filename) => {
    console.log('Filepath', filepath);
});

⑤ package.json の scripts に追加

"predeploy": "ng build -prod -aot",
"deploy": "node ./scripts/deploy.js"

準備完了!後は以下のコマンドでデプロイします!

$ npm run deploy

参考
https://johnlouros.com/blog/uploading-a-angular-app-to-S3-with-npm

mokkos
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした