Skip to content

Commit 631b13b

Browse files
mansonamansona
authored
Merge pull request #11 from Authmaker/feature/deployment
[WIP] Feature/deployment
2 parents 0f7cde5 + 038ae8c commit 631b13b

File tree

5 files changed

+223
-3
lines changed

5 files changed

+223
-3
lines changed

‎deployment/gcloud-deploy.md

+207
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
---
2+
title: Deploying with Google Cloud
3+
---
4+
5+
Deploying your Authmaker app is simple with [Google Cloud Platform](https://cloud.google.com/). With Google Cloud, hosting for small web applications is free (in most cases) - you won't have to pay until your application scales past their [free tier](https://cloud.google.com/free/).
6+
7+
If you don't have an existing Google Cloud account, you will need to create one before the next steps.
8+
9+
You will also need to have the [Google Cloud SDK](https://cloud.google.com/sdk/docs/) already installed, as we will be using the command line tools to easily deploy.
10+
11+
## Create a new Google Cloud project
12+
13+
From the Google Cloud console, create a new **project** for this application. Google Cloud Platform organizes your resources into projects - this makes it easy to manage permissions and settings for multiple deployments in one place. For example, _both_ our frontend application _and_ backend server deployments will belong to the same project.
14+
15+
## Deploy your backend app
16+
17+
First, let's get our backend deployed. From your backend app directory, simply run the command below using your project name:
18+
19+
```bash
20+
$ gcloud app deploy --project=PROJECT_NAME
21+
```
22+
You will see a prompt asking you to select the region for your app. Since we are deploying to Google's large network of servers, we need to select the region in which Google will store our application. A good rule of thumb is to choose the region closest to where your app's users will be (in order to reduce latency).
23+
24+
Next, you will be asked to confirm your deployment details, including the project name and the **target url**, the location where your app will be deployed. It will look something like `https://[PROJECT_NAME].appspot.com`. This is your new production API host.
25+
26+
## Update your Ember adapter
27+
28+
Before you deploy your Ember app, update your application adapter with your newly deployed API host. A great way to implement this is to declare different host values for production _and_ development inside `config/environment.js` and import from your application adapter. This allows you to easily pivot between local development and production builds without continually reassigning your host value.
29+
30+
In your application adapter, make the following changes:
31+
32+
```javascript {data-filename=app/adapters/application.js}
33+
34+
import DS from 'ember-data';
35+
import DataAdapterMixin from 'ember-simple-auth/mixins/data-adapter-mixin';
36+
// import the environment config
37+
import Config from 'my-blog/config/environment';
38+
39+
export default DS.JSONAPIAdapter.extend(DataAdapterMixin, {
40+
authorizer: 'authorizer:application',
41+
42+
// assign host value depending on environment
43+
host: Config.apiHost,
44+
namespace: 'v1',
45+
});
46+
```
47+
Then, attach the variable `apiHost` to your environment config, as shown below:
48+
49+
```javascript {data-filename=config/environment.js}
50+
51+
...
52+
53+
if (environment === 'development') {
54+
ENV.apiHost = 'http://localhost:3000';
55+
...
56+
},
57+
58+
if (evironment === 'production') {
59+
ENV.apiHost = 'https://[PROJECT_NAME].appspot.com';
60+
...
61+
}
62+
63+
...
64+
```
65+
66+
This ensures that your _production_ build will send all API requests to your deployed backend app, but your local _development_ build will continue making requests to `http://localhost:3000`.
67+
68+
## Configure your DNS
69+
70+
You will need to own a domain name to use as the URL for your deployed frontend application. You can register a new domain with [Google Domains](https://domains.google.com) if you do not already have one, but any DNS provider you choose is fine.
71+
72+
If you are using a DNS provider other than Google, you will need to verify ownership of the domain through [Google Webmaster Central](https://www.google.com/webmasters/verification/). If you created your domain with Google, this step is automatic.
73+
74+
**NOTE:** This deployment method requires deployment to a **subdomain**, such as `www.mydomain.com` or `app.mydomain.com`, instead of the root domain, `mydomain.com`.
75+
76+
### Create a CNAME record
77+
78+
Navigate to your DNS provider's control panel to access your domain settings. If you are using Google Domains, select the 'Configure DNS' option for your domain. From here, create a new `CNAME` record that will redirect your subdomain to the the Google Storage servers where your app will be hosted, `c.storage.googleapis.com.`.
79+
80+
It will look something like this:
81+
82+
<table>
83+
<tr>
84+
<th>NAME</th>
85+
<th>TYPE</th>
86+
<th>TTL</th>
87+
<th>DATA</th>
88+
</tr>
89+
<tr>
90+
<td>www.mydomain.com</td>
91+
<td>CNAME</td>
92+
<td>1h</td>
93+
<td>c.storage.googleapis.com.</td>
94+
</tr>
95+
</table>
96+
97+
For more information on `CNAME` redirects to Google Cloud Platform, [see the documentation here.](https://cloud.google.com/storage/docs/request-endpoints#cname)
98+
99+
## Create your storage bucket
100+
101+
From the navigation menu, select 'Storage' to access your project's Cloud Storage tools. From there, create a new storage **bucket** with the same name as your `CNAME` record for your subdomain. To continue our previous example, we would create a storage bucket with the name `www.mydomain.com`.
102+
103+
Keep note of both your project name and bucket name, as we will use them to configure our Ember app for deployment in the next step.
104+
105+
Next, navigate to your Google Storage 'Browser' view to see all buckets. You should see your frontend application bucket listed, along with some others that have been auto-generated for your backend deployment. At the far right of each bucket listing, you will see a vertical menu that you can click to access **'Edit Website Configuration'**. Click and fill both your **'Main page'** and **'404 (not found) page'** options with `index.html`, since we are about to deploy a single-page app and want any 404 errors to be handled by our Ember app.
106+
107+
Your bucket is now ready for deploying our frontend from the command line.
108+
109+
## Configure your Ember deployment
110+
111+
In your Ember application's directory, install the following packages for deployment:
112+
113+
```bash
114+
$ ember install ember-cli-deploy
115+
$ ember install ember-cli-deploy-gcloud-pack
116+
```
117+
118+
This will generate the file `config/deploy.js` for your app. Open the file and add your **project name** as the value for `gcloudProjectId` and your **bucket name** as the value for `productionBucket`, as shown below:
119+
120+
121+
```javascript {data-filename=config/deploy.js}
122+
'use strict';
123+
124+
// add your project name and bucket name here
125+
const gcloudProjectId = '** YOUR PROJECT ID **';
126+
const productionBucket = '** YOUR BUCKET **';
127+
128+
module.exports = function(deployTarget) {
129+
...
130+
};
131+
```
132+
133+
This sets your deployment location for your Ember app.
134+
135+
### Update your Authmaker instance app domain
136+
137+
Make sure your Authmaker instance for this project has the correct url for your production application domain. If you used a placeholder domain when you created your instance, update the value to match your production domain - in the case of this example, the same subdomain we used when naming our Google bucket, `www.mydomain.com`.
138+
139+
After you've updated your application domain, save your changes and click to view your updated _live_ Ember config object. You should see your production domain reflected as part of the object's `redirectUri`. Copy the full object to use for your app.
140+
141+
Open `config/environment.js` and include your unique live config object inside the **production** block. _(Make sure you place it inside the **production** block. We are **not** changing the development block or local config object.)_
142+
143+
```javascript {data-filename=config/environment.js}
144+
145+
...
146+
147+
if (environment === 'production') {
148+
// this object will be *UNIQUE* for your instance
149+
ENV.authmaker = {
150+
domainUrl: "https://my-app-name.authmaker.com",
151+
redirectUri: "https://www.mydomain.com/login",
152+
clientId: "yourClientId"
153+
};
154+
}
155+
156+
...
157+
```
158+
159+
## Deploy your Ember app
160+
161+
To deploy your frontend application, run the following command from your frontend directory:
162+
163+
```bash
164+
$ ember deploy production --activate
165+
```
166+
167+
Your app will build and deploy to your Google storage bucket!
168+
169+
**NOTE:** If you run into any permissions errors from GCloud, you might need to first login via the command line by running:
170+
171+
```bash
172+
$ gcloud auth application-default login
173+
```
174+
175+
You will be prompted to login, after which you shouldn't get any permissions errors when you run the deploy command. For more on GCloud command line authentication, see [here](https://cloud.google.com/sdk/gcloud/reference/auth/application-default/login).
176+
177+
## Deployment Iterations
178+
179+
The Authmaker curriculum was designed to be used as part of an iterative development process, continually developing and deploying as your application expands and improves. In the steps above, you updated your app for deployment **_in addition to_** the existing development config. You can continue to develop your application locally without changing any configuration details in the code.
180+
181+
### Running locally
182+
183+
To start your backend application locally, run:
184+
185+
```bash
186+
$ npm run start-local
187+
```
188+
189+
To start your Ember frontend locally, run:
190+
191+
```bash
192+
$ ember serve
193+
```
194+
195+
### Future deployments
196+
197+
To deploy a new version of your backend app, run:
198+
199+
```bash
200+
$ gcloud app deploy --project=PROJECT_NAME
201+
```
202+
203+
To deploy a new version of your frontend Ember app, run:
204+
205+
```bash
206+
$ ember deploy production --activate
207+
```

‎deployment/production-databases.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: Production Databases
3+
---
4+
5+
_Documentation coming soon!_

‎deployment/ssl-configuration.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: SSL Configuration
3+
---
4+
5+
_Documentation coming soon!_

‎implement-login/configure-app.md

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ Open `config/environment.js` and include the configuration details provided by A
2222
...
2323

2424
if (environment === 'development') {
25+
// this object will be *UNIQUE* for your instance
2526
ENV.authmaker = {
2627
domainUrl: "https://my-app-name.authmaker.com",
2728
redirectUri: "http://localhost:4200/login",

‎pages.yml

+5-3
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,9 @@
7474
- title: "Deployment"
7575
url: "deployment"
7676
pages:
77-
- title: "Production Databases"
78-
url: "production-databases.md"
7977
- title: "Deploying with Google Cloud"
80-
url: "gcloud-deploy.md"
78+
url: "gcloud-deploy"
79+
- title: "SSL Configuration"
80+
url: "ssl-configuration"
81+
- title: "Production Databases"
82+
url: "production-databases"

0 commit comments

Comments
 (0)