Category: Angular JS

Amazon Web Services, Angular JS, Ionic Framework, Mobile, S3, Serverless

Host an Ionic app into AWS S3 Bucket using Serverless framework

When I was working on a Mobile App’s front end development project, we were asked by our customer to deploy the ionic app into a public server ( as a Web SPA ), so that they could access & playing around with it immediately, in their browsers. Ionic framework comes with a built in web server which allow you to run the app as a Web application ( through invoking `ionic serve` command). Then, this part was not a problem to us. However, we should figure out where & how we were going to deploy the ionic app to. That time, we suggested our customer, to deploy the ionic app into our AWS EC2 Instance/Elasticbeanstalk or into their own on premise server.
Fast forward back to today, we have more options which allow us to deploy an Ionic app (also other web SPA like angular JS or React) into AWS S3 bucket and host the app in there. This is possible since AWS S3 bucket has capability to host static web page. Then, we have several tools to help us doing this: through AWS S3 Web Console, AWS SDK CLI tool or Serverless framework with S3 Client plugin.
In the time I wrote this article, I am working with Backend team which use Serverless framework in our project. Based on this situation, I am curious with this tool’s ability to deploy front end web Single Page Application (SPA) like Ionic, into an S3 bucket. In the next sections, we will cover steps of how to do this in Serverless framework’s way.

 

Pre-requisites

  • Ensure that you have AWS account.
  • Ensure that you have installed Node.js in your machine. Refer to this link if you have not installed it yet.
  • Ensure that you have installed Ionic framework, Android SDK and/or XCode in your machine. Refers to this link if you have not installed Ionic yet.
  • Ensure that you have installed stable version of Serverless framework (version 0.5.6). If not, run this command to install it: npm install -g serverless@^0.5.6
  • Login into your AWS Management Console, create a new IAM account and attach AdministratorAccess policy into the created IAM Account.

ionic_s3_1

  • Ensure that you have written the created IAM account’s ACCESS KEY ID & Secret access key. We are going to use these in later steps.

 

Prepare a Serverless project

  • In a terminal box, run sls project create command. Notice that running this command creates a new Cloud Formation’s template in your AWS account for specified region (in this sample, we choose ap-northeast-1 AWS region) and also created a new folder in your current directory.

ionic_s3_2

ionic_s3_3

  • Change directory to the folder created by running command in prior step, then running this command: npm install serverless-client-s3 --save to install serverless-client-s3 plugin
  • Create folder client/dist. In mac/linux command shell, we can do this by running this command mkdir -p client/dist.
  • Copy all files inside your Ionic project’s /www folder into client/dist folder , created in prior step.

  • In the serverless project’s root directory, edit & update the s-project.json file by adding these following changes:

 

Deploy the Ionic App into AWS S3 Bucket

  • In the serverless project’s root directory, run sls client deploy -s stageName -r regionName command to deploy the Ionic app into AWS S3 bucket for specific stage & region. Example: sls client deploy -s dev -r ap-northeast-1 to deploy the app into Tokyo data center and labeled as dev stage. This might take a while to finish.

  • Once it’s done, notice your AWS S3 console. There is a new bucket created in the list where its name is matched with the bucketname setting we define in our s-project.json file. View its content by clicking the folder’s link. Notice that the bucket contains all of files of our Ionic app, we copied in client/dist folder in prior step.

  • Click Properties button on the page, and click ‘Enable Web Hosting’ accordion button to display url link of the deployed web application.
  • Click the url link to display our Ionic app. Ensure that no error happens and our Ionic app’s landing page is displayed successfully.

 

The Flaw

The latest version of serverless-s3-client plugin (version 2.0) deploys the web app to s3 bucket with no restriction access policy, which mean it is accessible to anyone / public. While this is not a problem to us (the developers), to our customers, this is mostly undesired. Because they might not want people outside the developer team and themselves, to look at our current works on the deployed Ionic app.

At the moment, restricting accesses to the S3 bucket, require us to add access Policy on it manually through S3 web console. There are couple of guys whom created Pull Request on serverless-s3-client plugin’s github page which allow us to define S3 policy bucket inside s-project.json file. Once the serverless maintainers reviewed & merge these Pull Request, I will update this article with steps to add the s3 bucket’s access restriction policy.