Nuxt.js + Amplifyで静的ホスティング
Nuxt.js用意、フロントは適当に作成。
Vuetifyで適当に実装
DeployしたらなんかAccess deniedが出た。
<template>
<v-container>
<v-card
justify-center
class="mx-auto"
>
<v-system-bar
color="pink darken-2"
dark
>
<v-spacer />
<v-icon>mdi-window-minimize</v-icon>
<v-icon>mdi-window-maximize</v-icon>
<v-icon>mdi-close</v-icon>
</v-system-bar>
<v-app-bar
dark
color="pink"
>
<v-app-bar-nav-icon />
<v-toolbar-title
justify-center
>
My Profile
</v-toolbar-title>
<v-spacer />
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
</v-app-bar>
<v-row dense>
<v-col cols="12">
<v-card
color="#385F73"
dark
>
<v-card-title class="headline">
Self-Introduction.
</v-card-title>
<v-card-subtitle>Software Engineer</v-card-subtitle>
<v-card-text>
Skills:</br>
Frameworks:</br>
Other Fields:</br>
Inferential statistics,Bayesian statistics,Accounting,Finance,Quants analysis
</v-card-text>
....
amplify.yml
version: 1
frontend:
phases:
preBuild:
commands:
- yarn install
build:
commands:
- yarn generate
artifacts:
# IMPORTANT - Please verify your build output directory
baseDirectory: dist/
files:
- '**/*'
cache:
paths:
- node_modules/**/*
ハマったところ
Nuxt.jsの静的ホスティングについて詳しくなかったので
まずgenerateしていなかったこと。生成されたdistフォルダをamplify.ymlの
baseDirectoryに設定した。
buildコマンドをyarn buildにしていたこと。
amplify.ymlのbuild commandsをyarn generateに変更した。
無事ホスティングできた。