Deploy Angular AWS Beanstalk using code pipeline
Angular default generated app git
https://github.com/thallapalli/angular-app.git
Select code pipleline servive create as below
Click Next
Select Source provider as GitHub
Click on Connect to GitHub
I have already configured my github so screen looks below.
if we are settingup for the first time just selct default options .just provide your github url (https://github.com/thallapalli/angular-app.git)
click Next
select Build provider as AWS code build and Under project name click on Create Project
provide code build project name
angular-app-codebuild
Operating system as :Ubuntu
make sure to add buildspec.yml file to github root directory
version: 0.2
phases:
install:
runtime-versions:
nodejs: 10
pre_build:
commands:
- echo Installing source NPM dependencies...
- npm cache clean --force
- npm install -g @angular/cli
- npm install --save-dev @angular-devkit/build-angular
build:
commands:
- echo Build started on `date`
- ng build --prod
post_build:
commands:
- echo Build completed on `date`
artifacts:
files:
- '**/*'
base-directory: dist/angular-crud-client
discard-paths: yes
Runtime standard
Image select latest
Image version select latest
Keep rest all default
Click on continue to pipeline
Now you will redirected to codepipleline project
click Next
Deploy provider select Beanstalk
Select Application name and env name
review create pipleline
now you will be redirected to codepiple and starts
just watchout code will be deployed beanstalk env.
Troubleshooting from here
I see that below error is appeared
so added server.js & package.json to src/asset folders
server.js content is below
const express = require('express');
const http = require('http');
const app = express();
const port = process.env.PORT || 3001;
app.use(express.static(__dirname));
const server = http.createServer(app);
server.listen(port, ()=> console.log("Running....ss....."));
your package.json is one which created underroot folder your app.copy package.json to src/asset
and move "@angular/cli": "~8.3.21" from devDependencies to dependencies
I committed above two files to github . under src/asset folder
As soon as you commit files your codepiple starts building
watchout for codebuild
this time my application got deployed but I got 503 error when i click URL
Lets watch servers logs
Now I see below error in logs
Takeouts:
1 : instruct beanstalk server to run node js server .hence server.js added
2 add server.js and package.json to asset folder .while ng build start .these two files will be copied under dist folder
3. instruct beanstalk to all dependencies are added in package.json. in my case error was about express.so i moved "express": "^4.17.1" to devdependencies
https://github.com/thallapalli/angular-app.git
Select code pipleline servive create as below
Select Source provider as GitHub
Click on Connect to GitHub
I have already configured my github so screen looks below.
if we are settingup for the first time just selct default options .just provide your github url (https://github.com/thallapalli/angular-app.git)
click Next
select Build provider as AWS code build and Under project name click on Create Project
provide code build project name
angular-app-codebuild
Operating system as :Ubuntu
make sure to add buildspec.yml file to github root directory
version: 0.2
phases:
install:
runtime-versions:
nodejs: 10
pre_build:
commands:
- echo Installing source NPM dependencies...
- npm cache clean --force
- npm install -g @angular/cli
- npm install --save-dev @angular-devkit/build-angular
build:
commands:
- echo Build started on `date`
- ng build --prod
post_build:
commands:
- echo Build completed on `date`
artifacts:
files:
- '**/*'
base-directory: dist/angular-crud-client
discard-paths: yes
Runtime standard
Image select latest
Image version select latest
Keep rest all default
Click on continue to pipeline
Now you will redirected to codepipleline project
click Next
Deploy provider select Beanstalk
Select Application name and env name
review create pipleline
now you will be redirected to codepiple and starts
just watchout code will be deployed beanstalk env.
Troubleshooting from here
I see that below error is appeared
so added server.js & package.json to src/asset folders
server.js content is below
const express = require('express');
const http = require('http');
const app = express();
const port = process.env.PORT || 3001;
app.use(express.static(__dirname));
const server = http.createServer(app);
server.listen(port, ()=> console.log("Running....ss....."));
your package.json is one which created underroot folder your app.copy package.json to src/asset
and move "@angular/cli": "~8.3.21" from devDependencies to dependencies
I committed above two files to github . under src/asset folder
As soon as you commit files your codepiple starts building
watchout for codebuild
this time my application got deployed but I got 503 error when i click URL
Lets watch servers logs
Now I see below error in logs
/var/log/nodejs/nodejs.log ------------------------------------- at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15) at Function.Module._load (internal/modules/cjs/loader.js:562:25) at Module.require (internal/modules/cjs/loader.js:692:17) at require (internal/modules/cjs/helpers.js:25:18) at Object.<anonymous> (/var/app/current/server.js:1:17) at Module._compile (internal/modules/cjs/loader.js:778:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) internal/modules/cjs/loader.js:638 throw err;
I searched for the above error google ,most of the search results suggest to install npm express
so execute below command
C:\Users\13033\git\angular-app>npm install express --save
commit code
there are two files updated package.json and package.lock file .I commited two files
my codepipeline picked above files started building
after deployments completes my server still bad state ,so i again looked at servers logs
I still see below error
/var/log/nodejs/nodejs.log
------------------------------------- at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15) at Function.Module._load (internal/modules/cjs/loader.js:562:25) at Module.require (internal/modules/cjs/loader.js:692:17) at require (internal/modules/cjs/helpers.js:25:18) at Object.<anonymous> (/var/app/current/server.js:1:17) at Module._compile (internal/modules/cjs/loader.js:778:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) internal/modules/cjs/loader.js:638 throw err; ^ Error: Cannot find module 'express'
So I stared looking beanstalk documentation in aws.
beanstalk picks libraries from package.json which is under asset folder
so added "express": "^4.17.1" to devdepndencies
commit code
as soon as i copied express": "^4.17.1 in dependencies section ,it is resolved Error: Cannot find module 'express'
Takeouts:
1 : instruct beanstalk server to run node js server .hence server.js added
2 add server.js and package.json to asset folder .while ng build start .these two files will be copied under dist folder
3. instruct beanstalk to all dependencies are added in package.json. in my case error was about express.so i moved "express": "^4.17.1" to devdependencies
Comments
Post a Comment