Making angular webapp with yeoman and S3
ㅇ make s3 bucket
1. make:
All Buckets /www.test.com
2. hosting
Static Website Hosting
3. permissions
Grantee: everyone, view permission
ㅇ add Hosted zone into route53
1. add Hosted zone into route53
2. create record set
A type
alias: true
alias target: s3 website endpoint
www.test.com
s3-website-us-east-1.amazonaws.com
ㅇ create with yeoman
yo angular
ㅇ run app
grunt server
ㅇ build grunt & upload
grunt build
cd dist
dist> s3cmd put --recursive . s3://www.test.com
cf) s3cmd del --force --recursive s3://www.test.com
ㅇ add css with yeoman grunt
/www.test.com/app/index.html
<!-- build:css(.) styles/style.css -->
<link rel="stylesheet" href="styles/style.css">
/www.test.com/Gruntfile.js
cssmin: {
dist: {
files: {
'<%= yeoman.dist %>/styles/main.css': [
'.tmp/styles/{,*/}*.css'
]
}
}
},
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'*.{ico,png,txt}',
'.htaccess',
'*.html',
'views/{,*/}*.html',
'images/{,*/}*.{webp}',
'styles/*',
'fonts/*'
]
ㅇ make s3 bucket
1. make:
All Buckets /www.test.com
2. hosting
Static Website Hosting
3. permissions
Grantee: everyone, view permission
ㅇ add Hosted zone into route53
1. add Hosted zone into route53
2. create record set
A type
alias: true
alias target: s3 website endpoint
www.test.com
s3-website-us-east-1.amazonaws.com
ㅇ create with yeoman
yo angular
ㅇ run app
grunt server
ㅇ build grunt & upload
grunt build
cd dist
dist> s3cmd put --recursive . s3://www.test.com
cf) s3cmd del --force --recursive s3://www.test.com
ㅇ add css with yeoman grunt
/www.test.com/app/index.html
<!-- build:css(.) styles/style.css -->
<link rel="stylesheet" href="styles/style.css">
/www.test.com/Gruntfile.js
cssmin: {
dist: {
files: {
'<%= yeoman.dist %>/styles/main.css': [
'.tmp/styles/{,*/}*.css'
]
}
}
},
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'*.{ico,png,txt}',
'.htaccess',
'*.html',
'views/{,*/}*.html',
'images/{,*/}*.{webp}',
'styles/*',
'fonts/*'
]
Comments
Post a Comment