Skip to content

Commit

Permalink
Redesigned the congratulations page to be more celebratory (#7)
Browse files Browse the repository at this point in the history 
Co-authored-by: Michelle Chen <37674480+chemichelle@users.noreply.github.com>
  • Loading branch information
@code128 @chemichelle @steren
2 people authored and steren committed Jan 28, 2020
1 parent 763b82b commit c45d502
Show file tree
Hide file tree
Showing 6 changed files with 887 additions and 104 deletions.
4 changes: 2 additions & 2 deletions Dockerfile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ FROM marketplace.gcr.io/google/ubuntu1804:latest
# Copy the binary to the production image from the builder stage.
COPY --from=builder /go/src/cloudrun/hello/hello /hello

# Copy template
# Copy template & assets
COPY index.html /index.html

COPY assets ./assets/
# Run the web service on container startup.
CMD ["/hello"]
691 changes: 691 additions & 0 deletions assets/celebration.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/cloud_bg.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/lightbulb_icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 4 additions & 1 deletion hello.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,11 +88,14 @@ func main() {
tmpl.Execute(w, data)
})

fs := http.FileServer(http.Dir("./assets"))
http.Handle("/assets/", http.StripPrefix("/assets/", fs))

port := os.Getenv("PORT")
if port == "" {
port = "8080"
}

log.Print("Hello from Cloud Run! The container started successfully and is listening for HTTP requests on $PORT.")
log.Print("Hello from Cloud Run! The container started successfully and is listening for HTTP requests on $PORT")
log.Fatal(http.ListenAndServe(fmt.Sprintf(":%s", port), nil))
}
289 changes: 188 additions & 101 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,122 +1,209 @@
<!doctype html>
<html lang=en>

<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Congratulations | Cloud Run</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsSAAALEgHS3X78AAAB5klEQVRYha2XMVLDMBBFPxl6qCjciBskNzA3AE5AqrTQuaVVR1pX4QSYGyQ3SGqGATcu3JBUlGGUiTPyeiWvZH6TsSTLb/+XN8nZfr+H0lUBYAvgucySbzBSupoCmJRZ8sTNx2p0vG8J4AHAl9LVQunqmtnPQD4qXa0d81GyARo1IC/2hmWWGIfeAYwBGIi7fwMos2QNYEfmTLWXZKw4fl4AeKOQQxwAcaERrbIg14MjCQKwYrA1KJI+gBtmjLqAIZEcXsNGSlfb42a27sssKaw15lz8ePbcGOdcrzPViFz3uuCIwVZQJBIAbiMuBlviSCQASulqEgjQqPctaQE4+gEiYrDljYQ6AIcLU2ZM6gJ8kUgBxp6uGKJOJFIACJuSRK1IOgCecxDzNrh0iuScW/D7+eG4LxGuk6sDcDVbTZhuCEe1sV/JxuFpnacF5wDX/zsAV7OVOZS3EQ8/tOo6Tw+tWgqwqfN0S8Ziqp/Xedr6SScFWDBjIQAny+lEC8CT/5KsC7G/ZbkXwFF9WefpmoxJq+9YHgMQc/qdlscAhNrvtdwJ4Mh/x1Thq77XcieApHoPgNjyUABJ8wmyfBAAU32w5SyAI/+5p/tFW84CkOpfzb9kaqll/yDLfQDsgy2Z6gdb3hKAP2n+6m+fxBVHAAAAAElFTkSuQmCC"
rel="icon"
rel="icon"
type="image/png"
/>
<style>
body {
font-family: 'Roboto', sans-serif;
}
.container {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.hero {
margin-top: 100px;
margin-bottom: 100px;
}
.hero .logo {
width: 140px;
float: left;
margin-right: 32px;
}
.hero .message {
}
.details {
clear: both;
}
.warning {
color: rgb(213, 0, 0);
background: #fbe9e7;
margin-bottom: 1.0em;
padding: 1.0em;
}
body {
font-family: 'Roboto', sans-serif;
background: url('/assets/cloud_bg.svg');
background-size: cover;
background-position: center;
background-attachment: fixed;
line-height: 1.6;
}

.warning a:visited {
color: rgb(213, 0, 0);
}
h1 {
font-size: 24px;
font-weight: bold;
margin-bottom: 0px;
}

.warning a:link {
color: rgb(213, 0, 0);
}
h2 {
font-size: 18px;
font-weight: normal;
margin-top: 4px;
}

.cta {
text-align: center;
margin: 32px;
}
.cta a {
color: white;
text-decoration: none;
background-color: rgb(66, 133, 244);
padding: 18px 24px;
margin: 12px;
min-height: 36px;
border-radius: 4px;
font-weight: 600;
}
.cta a:hover {
background-color: rgb(66, 133, 244, 0.9);
}
@media (max-width: 600px) {
.hero .logo {
float: initial;
display: block;
margin-left: auto;
margin-right: auto;
}
.container {
margin-top: 0;
}
.hero {
margin-top: 0;
margin-bottom: 24px;
}
h3 {
font-size: 20px;
margin-bottom: 0px;
}

.next {
font-size: 15px;
margin-top: 8px;
margin-bottom: 8px;
}

.container {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}

.hero {
margin-top: 172px;
}

.hero .logo {
width: 140px;
float: left;
margin-right: 32px;
}

.hero .message {
font-size: 15px;
text-align: center;
margin-bottom: 24px;
}

.details {
clear: both;
height: 400px;
line-height: 1.8;
}

.callout {
font-size: 14px;
background-color: #E8F0FE;
width: 100%;
color: #1967D2;
font-weight: 600;
padding: 16px 24px;
line-height: 1.6;
}

.callout label {
display: block;
padding-left: 2em;
text-indent: -2em;
}

.code {
font-family: 'Roboto Mono', Courier, monospace;
color: #F90056;
background-color: #F8F8F8;
border: 1px solid #DDD;
border-radius: 2px;
padding: 0 6px;
font-weight: 500;
}

.warning {
color: rgb(213, 0, 0);
background: #fbe9e7;
margin-bottom: 1.0em;
padding: 1.0em;
}

.warning a:visited {
color: rgb(213, 0, 0);
}

.warning a:link {
color: rgb(213, 0, 0);
}

.cta {
color: #3367D6;
text-align: left;
position: absolute;
}

.cta a {
color: white;
text-decoration: none;
background-color: rgb(66, 133, 244);
padding: 8px 12px;
margin-top: 8px;
min-height: 36px;
border-radius: 2px;
font-weight: 600;
}

.cta a:hover {
background-color: rgb(66, 133, 244, 0.9);
}

@media (max-width: 600px) {
.hero .logo {
float: initial;
display: block;
margin-left: auto;
margin-right: auto;
}

.container {
margin-top: 0;
}

.hero {
margin-top: 0;
margin-bottom: 24px;
}
}
</style>
</head>

<body>
<div class="container">

<div class="hero">
<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><style>.cls-3{fill:#fff}</style></defs><path d="M505.9 232.48l-105.22-183C392.24 34.91 377 26 361.22 26H150.79c-16.86 0-31.59 9.88-39.46 23.5L6.11 232.1a45.9 45.9 0 0 0 0 45.75l105.22 183.8C119.75 476.26 135 486 150.78 486h210.43c16.86 0 31.59-10.63 39.46-24.24l105.22-183a46.94 46.94 0 0 0 .01-46.28z" fill="#4285f4" id="BASE"/><path d="M390.38 256l-147.66-87 11.62 54.82L199 168.48 209.84 252l-47 115.86L281 486h80.24c16.86 0 31.59-10.63 39.46-24.24L472 337.65z" opacity=".07" id="shadow"/><g id="art"><path class="cls-3" d="M226.16 256l-27.13-87.52-36.18-24.36L197.52 256l-34.67 111.88 36.18-24.36L226.16 256z"/><path class="cls-3" d="M224.2 144.12L258.88 256 224.2 367.88 390.38 256zM270.67 240l-17.75-57.26L338 240z"/></g></svg>

<div class="message">
<h1>It's running! {{if .NetworkEgressError }}but...{{end}}

</h1>
<p>Congratulations, you successfully deployed a container image to Cloud Run.</p>
<p>This created the revision "<i>{{.Revision}}</i>" of the Cloud Run service "<i>{{.Service}}</i>"{{if .ProjectFound}} in the GCP project "<i>{{.Project}}</i>"{{end}}.</p>
</div>
</div>

{{if .NetworkEgressError}}
<div class="details warning">
<p>
Network egress is not properly configured for Cloud Run on GKE. This blocks all requests from Cloud Run services to Google Cloud APIs and external services. To resolve, see the topic
<a href="https://cloud.google.com/run/docs/gke/setup#enabling_all_outbound_network_access" target="_blank">enable outbound network access</a> for Cloud Run services in your Kubernetes Engine cluster.
</p>
</div>
{{end}}

<div class="details">
<p>The code inside this container is listening for HTTP requests on the port defined by the <code>PORT</code> environment variable and is not able to execute when it is not processing a request.
<br/>
You can deploy to Cloud Run any container that respects these constraints, it will automatically run and scale without you having to worry about anything.
</p>

<h3>What's next?</h3>
<p>Follow a tutorial to build a "Hello World" application in your favorite language into a container image, and then deploy it to Cloud Run:</p>
<p class="cta"><a href="https://cloud.google.com/run/docs/quickstarts/build-and-deploy" target="_blank">Build and deploy Quickstart</a></p>
</div>

</div>
<div class="container">

<div class="hero">
<div style="text-align:center;">
<img src="/assets/celebration.svg">
</div>

<div class="message">
<h1>It's running! {{if .NetworkEgressError }}but...{{end}}</h1>
<h2>Congrats, you successfully deployed a container image to Cloud Run</h2>
</div>
</div>

{{if .NetworkEgressError}}
<div class="details warning">
<p>
Network egress is not properly configured for Cloud Run on GKE. This blocks all requests from Cloud Run
services
to Google Cloud APIs and external services. To resolve, see the topic
<a href="https://cloud.google.com/run/docs/gke/setup#enabling_all_outbound_network_access"
target="_blank">enable outbound network access</a> for Cloud Run services in your Kubernetes Engine
cluster.
</p>
</div>
{{end}}

<div class="details">
<p>This created the revision <span class="code">{{.Revision}}</span> of the Cloud Run service <span
class="code">{{.Service}}</span>{{if .ProjectFound}} in the GCP project <span
class="code">{{.Project}}</span>{{end}}.</p>

<p class="callout">
<label><img src="/assets/lightbulb_icon.svg" style="margin:0px 8px 0px 0px; vertical-align:text-top;">
You can deploy any container to Cloud Run that listens for HTTP requests on the port defined by the
<code>PORT</code> environment variable.
Cloud Run will scale automatically based on requests and you never have to worry about
infrastructure.</label>
</p>

<h3>What's next?</h3>
<p class="next">Follow the Quickstart tutorial to build a “Hello World” application in your favorite
language into
a container image, and then deploy it to Cloud Run.</p>
<p class="cta">
<a href="https://cloud.google.com/run/docs/quickstarts/build-and-deploy" target="_blank">
BUILD AND DEPLOY QUICKSTART</a></p>
</div>

</div>
</body>

</html>

0 comments on commit c45d502

Please sign in to comment.