どのようにgithubアクションを使用してS 3にスタティックウェブサイトを展開する.
15338 ワード
私たちのすべては、いくつかの時点で、静的なウェブサイトを展開する必要があります.これは、ページが単なるポートフォリオや重いフレームワークを必要としない単一のページJavaScriptアプリケーションであるためかもしれません.私たちのほとんどは、静的なウェブサイトをホストする必要があります、それはS 3、Azure Blobストレージなどであるかもしれませんので、私たちのほとんどは、S 3(私の場合)にファイルをコピーします.しかし、静的なウェブサイトかもしれませんが、バグや訂正は確かにあります.その後、手動でS 3でファイルを置き換える必要があります.そこで今日はGithubアクションを使って展開するS 3の全プロセスを自動化します.それで始めましょう.
Gitハブアクションとは
あなたはGithubアクションを介してあなたのGitHubリポジトリに直接ソフトウェア開発のカスタムライフサイクルルーチンを構築することができます.ワークフローは、特定の状況の下で自動的に実行されるかもしれない行動として知られているいくつかの活動から成ります.これにより、連続的な統合(CI)、CDを追加することができますし、多くの機能を右のリポジトリに.それで、始めましょう.
必要条件 AWSアカウントまたはIAMユーザ スタティックウェブサイト ギタブレポ あなたが既にGithubレポセットを持っているならば、- 2にスキップしてください.
ステップ- 1 githubレポを作成する
ステップ- 2リポジトリ内のコードを配置する
今あなたのリポジトリが作成されますので、リポジトリ内で独自のHTML、CSS、JS、画像などをアップロードし始めましょう.場合は、ダミーの静的なウェブサイトの練習をコピーしたいコードを下から
スピン.HTML
このリポジトリは次のようになります
ステップ- 3 AWSの時間!
あなたのAWSアカウントにログインして、プログラムのアクセスでIAMユーザーをつくって、以下のようにしてください
セキュリティ証明書オプションを選択する
次にダウンロードオプションを選択
IDとキーがダウンロードされたら.彼らにつかまりなさい.そして今、AWSコンソールからS 3バケットを作成します.
私は私のバケツスピンを命名しました、しかし、あなたがあなたのドメインのためにS 3をつくっているとき、それが覚えているということを思い出してください.それから、S 3名はあなたのドメインの名前でなければなりません.他のドメインからのCnamは動作しません
そして、許可で-バケット方針は以下のコードを加えます
今すぐGithubレポに戻る名前をファイルを作成します.そのフォルダの中のGithubは、ワークフローという名前の別のフォルダをファイル名で以下のコードに入れます
メイン.気象研
次に、AWSからダウンロードしたAWS資格情報を追加します.
AWSHERNECTIOLIGHT KEYRIKE ID *と* AWSHERNECHECTHERNECTIONER KEY *と同じです.これらの変数の名前を変更する必要はありません.
完了!今すぐメインブランチに更新をプッシュし、エラーがあるかどうかを確認するGithubアクションに移動します.をお楽しみください自動プッシュアップグレードAWS S 3ギタブアクションでバケツ.
Gitハブアクションとは
あなたはGithubアクションを介してあなたのGitHubリポジトリに直接ソフトウェア開発のカスタムライフサイクルルーチンを構築することができます.ワークフローは、特定の状況の下で自動的に実行されるかもしれない行動として知られているいくつかの活動から成ります.これにより、連続的な統合(CI)、CDを追加することができますし、多くの機能を右のリポジトリに.それで、始めましょう.
必要条件
ステップ- 1 githubレポを作成する
ステップ- 2リポジトリ内のコードを配置する
今あなたのリポジトリが作成されますので、リポジトリ内で独自のHTML、CSS、JS、画像などをアップロードし始めましょう.場合は、ダミーの静的なウェブサイトの練習をコピーしたいコードを下から
スピン.HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Spin Wheel Using JS</title>
<link rel="stylesheet" href="./spin.css">
</head>
<body>
<!-- partial:index.partial.html -->
<center><div id="chart"></div>
<div id="question"><h1></h1></div></center>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- partial -->
<script src="./spin.js"></script>
</body>
</html>
body{
background-image: url(technical2.png);
}
text{
font-family:Helvetica, Arial, sans-serif;
font-size:11px;
pointer-events:none;
}
#chart{
/* position:absolute;
width:500px;
height:500px;
top:0;
left:0;*/
}
#question{
position: absolute;
width:400px;
height:500px;
top:180px;
left:1000px;
}
#question h1{
color: white;
text-shadow: -1px 0px #fe0201, 1px 0px #06ffff, -2px 0px #fe0201, 2px 0px #06ffff, -3px 0px #fe0201, 3px 0px #06ffff, -4px 0px #fe0201, 4px 0px #06ffff, -5px 0px #fe0201, 5px 0px #06ffff;
font-size: 90px;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: absolute;
padding: 0;
margin: 0;
top:50%;
-webkit-transform:translate(0,-50%);
transform:translate(0,-50%);
}
var padding = {top:20, right:40, bottom:0, left:0},
w = 500 - padding.left - padding.right,
h = 500 - padding.top - padding.bottom,
r = Math.min(w, h)/2,
rotation = 0,
oldrotation = 0,
picked = 100000,
oldpick = [],
color = d3.scale.category20();//category20c()
//randomNumbers = getRandomNumbers();
//http://osric.com/bingo-card-generator/?title=HTML+and+CSS+BINGO!&words=padding%2Cfont-family%2Ccolor%2Cfont-weight%2Cfont-size%2Cbackground-color%2Cnesting%2Cbottom%2Csans-serif%2Cperiod%2Cpound+sign%2C%EF%B9%A4body%EF%B9%A5%2C%EF%B9%A4ul%EF%B9%A5%2C%EF%B9%A4h1%EF%B9%A5%2Cmargin%2C%3C++%3E%2C{+}%2C%EF%B9%A4p%EF%B9%A5%2C%EF%B9%A4!DOCTYPE+html%EF%B9%A5%2C%EF%B9%A4head%EF%B9%A5%2Ccolon%2C%EF%B9%A4style%EF%B9%A5%2C.html%2CHTML%2CCSS%2CJavaScript%2Cborder&freespace=true&freespaceValue=Web+Design+Master&freespaceRandom=false&width=5&height=5&number=35#results
var data = [
{"label":"", "value":1, "question":"Team 1"}, // padding
{"label":"", "value":2, "question":"Team 2"}, //font-family
{"label":"", "value":3, "question":"Team 3"}, //color
{"label":"", "value":4, "question":"Team 4"}, //font-weight
{"label":"", "value":5, "question":"Team 5"}, //font-size
{"label":"", "value":6, "question":"Team 6"}, //background-color
/*{"label":"IPAD PRO", "value":7, "question":"Which word is used for specifying an HTML tag that is inside another tag?"}, //nesting*/
/*{"label":"LAND", "value":8, "question":"Which side of the box is the third number in: margin:1px 1px 1px 1px; ?"}, //bottom
{"label":"MOTOROLLA", "value":9, "question":"What are the fonts that don't have serifs at the ends of letters called?"}, //sans-serif
{"label":"BMW", "value":10, "question":"With CSS selectors, what character prefix should one use to specify a class?"}*/
];
var svg = d3.select('#chart')
.append("svg")
.data([data])
.attr("width", w + padding.left + padding.right)
.attr("height", h + padding.top + padding.bottom);
var container = svg.append("g")
.attr("class", "chartholder")
.attr("transform", "translate(" + (w/2 + padding.left) + "," + (h/2 + padding.top) + ")");
var vis = container
.append("g");
var pie = d3.layout.pie().sort(null).value(function(d){return 1;});
// declare an arc generator function
var arc = d3.svg.arc().outerRadius(r);
// select paths, use arc generator to draw
var arcs = vis.selectAll("g.slice")
.data(pie)
.enter()
.append("g")
.attr("class", "slice");
arcs.append("path")
.attr("fill", function(d, i){ return color(i); })
.attr("d", function (d) { return arc(d); });
// add the text
arcs.append("text").attr("transform", function(d){
d.innerRadius = 0;
d.outerRadius = r;
d.angle = (d.startAngle + d.endAngle)/2;
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")translate(" + (d.outerRadius -10) +")";
})
.attr("text-anchor", "end")
.text( function(d, i) {
return data[i].label;
});
container.on("click", spin);
function spin(d){
container.on("click", null);
//all slices have been seen, all done
console.log("OldPick: " + oldpick.length, "Data length: " + data.length);
if(oldpick.length == data.length){
console.log("done");
container.on("click", null);
return;
}
var ps = 360/data.length,
pieslice = Math.round(1440/data.length),
rng = Math.floor((Math.random() * 1440) + 360);
rotation = (Math.round(rng / ps) * ps);
picked = Math.round(data.length - (rotation % 360)/ps);
picked = picked >= data.length ? (picked % data.length) : picked;
if(oldpick.indexOf(picked) !== -1){
d3.select(this).call(spin);
return;
} else {
oldpick.push(picked);
}
rotation += 90 - Math.round(ps/2);
vis.transition()
.duration(3000)
.attrTween("transform", rotTween)
.each("end", function(){
//mark question as seen
d3.select(".slice:nth-child(" + (picked + 1) + ") path")
.attr("fill", "#111");
//populate question
d3.select("#question h1")
.text(data[picked].question);
oldrotation = rotation;
/* Get the result value from object "data" */
console.log(data[picked].value)
/* Comment the below line for restrict spin to sngle time */
container.on("click", spin);
});
}
//make arrow
svg.append("g")
.attr("transform", "translate(" + (w + padding.left + padding.right) + "," + ((h/2)+padding.top) + ")")
.append("path")
.attr("d", "M-" + (r*.15) + ",0L0," + (r*.05) + "L0,-" + (r*.05) + "Z")
.style({"fill":"black"});
//draw spin circle
container.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 60)
.style({"fill":"white","cursor":"pointer"});
//spin text
container.append("text")
.attr("x", 0)
.attr("y", 15)
.attr("text-anchor", "middle")
.text("SPIN")
.style({"font-weight":"bold", "font-size":"30px"});
function rotTween(to) {
var i = d3.interpolate(oldrotation % 360, rotation);
return function(t) {
return "rotate(" + i(t) + ")";
};
}
function getRandomNumbers(){
var array = new Uint16Array(1000);
var scale = d3.scale.linear().range([360, 1440]).domain([0, 100000]);
if(window.hasOwnProperty("crypto") && typeof window.crypto.getRandomValues === "function"){
window.crypto.getRandomValues(array);
console.log("works");
} else {
//no support for crypto, get crappy random numbers
for(var i=0; i < 1000; i++){
array[i] = Math.floor(Math.random() * 100000) + 1;
}
}
return array;
}
このリポジトリは次のようになります
ステップ- 3 AWSの時間!
あなたのAWSアカウントにログインして、プログラムのアクセスでIAMユーザーをつくって、以下のようにしてください
セキュリティ証明書オプションを選択する
次にダウンロードオプションを選択
IDとキーがダウンロードされたら.彼らにつかまりなさい.そして今、AWSコンソールからS 3バケットを作成します.
私は私のバケツスピンを命名しました、しかし、あなたがあなたのドメインのためにS 3をつくっているとき、それが覚えているということを思い出してください.それから、S 3名はあなたのドメインの名前でなければなりません.他のドメインからのCnamは動作しません
そして、許可で-バケット方針は以下のコードを加えます
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::Bucket-Name/*" ( Replace this with your bucket name )
]
}
]
}
今すぐGithubレポに戻る名前をファイルを作成します.そのフォルダの中のGithubは、ワークフローという名前の別のフォルダをファイル名で以下のコードに入れます
メイン.気象研
name: Upload Website
on:
push:
branches:
- main
jobs:
iamvarshith_dev:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v1
- name: Configure AWS Credentials
uses: aws-actions/configure-aws-credentials@v1
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
# aws-region
aws-region: us-east-1( Replace with your AWS Bucket Region)
- name: Deploy static site to S3 bucket
# Your bucker name
run: aws s3 sync . s3://Bucket_name --delete
次に、AWSからダウンロードしたAWS資格情報を追加します.
AWSHERNECTIOLIGHT KEYRIKE ID *と* AWSHERNECHECTHERNECTIONER KEY *と同じです.これらの変数の名前を変更する必要はありません.
完了!今すぐメインブランチに更新をプッシュし、エラーがあるかどうかを確認するGithubアクションに移動します.をお楽しみください自動プッシュアップグレードAWS S 3ギタブアクションでバケツ.
Reference
この問題について(どのようにgithubアクションを使用してS 3にスタティックウェブサイトを展開する.), 我々は、より多くの情報をここで見つけました https://dev.to/iamvarshith/how-to-deploy-the-static-website-to-s3-using-github-actions-2a2nテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol