add angular & terraform quick guide
Yik Teng Hie
5 years ago
parent
5f282f66b2
commit
4cd23964ec
@ -0,0 +1,136 @@
|
||||
# Angular Quick Guide
|
||||
|
||||
* Angular written in Typescript. AngularJS written in Javascript
|
||||
* [Reference](https://angular.io)
|
||||
* [Tutorial](https://www.simplilearn.com./tutorials/angular-tutorial)
|
||||
* Using *Jasmine* + *Karma* testing framework
|
||||
* [Spring security + angular](https://spring.io/guides/tutorials/spring-security-and-angular-js/)
|
||||
|
||||
## Installation
|
||||
|
||||
```shell
|
||||
$ npm i -g @angular-cli
|
||||
|
||||
// create app
|
||||
$ ng new my-app
|
||||
|
||||
// run app
|
||||
$ cd my-app
|
||||
$ ng serve [--open] // --open : automatically open browser @ localhost:4200
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Coding
|
||||
|
||||
```sh
|
||||
// create component
|
||||
$ ng generate component <component-name>
|
||||
|
||||
// generates
|
||||
// component file: <component-name>.component.ts
|
||||
// template file : <component-name>.component.html
|
||||
// CSS file : <component-name>.component.css
|
||||
// testing file : <component-name>.component.spec.ts
|
||||
```
|
||||
|
||||
## Routing (Multi Page app)
|
||||
|
||||
```shell
|
||||
$ ng new routing-app --routing
|
||||
```
|
||||
|
||||
* Create each routes components
|
||||
|
||||
```shell
|
||||
$ cd routing-app
|
||||
|
||||
$ ng generate component first
|
||||
|
||||
$ ng generate component second
|
||||
```
|
||||
|
||||
* update `AppRoutingMOdule` `app-routing.module.ts`
|
||||
|
||||
```ts
|
||||
import { FirstComponent } from './first/first.component';
|
||||
import { SecondComponent } from './second/second.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: 'first-component', component: FirstComponent },
|
||||
{ path: 'second-component', component: SecondComponent },
|
||||
];
|
||||
```
|
||||
|
||||
* add links on landing html page `app.component.html`
|
||||
|
||||
```html
|
||||
<h1>Angular Router App</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a routerLink="/first-component" routerLinkActive="active">First Component</a></li>
|
||||
<li><a routerLink="/second-component" routerLinkActive="active">Second Component</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<router-outlet></router-outlet>
|
||||
```
|
||||
|
||||
## Add Service for getting data
|
||||
|
||||
* [Reference](https://www.techniediaries.com/routing-angular-router/)
|
||||
|
||||
```shell
|
||||
$ ng generate service data
|
||||
|
||||
// this generates
|
||||
// src/app/data.service.ts
|
||||
// src/app/data.service.spec.ts
|
||||
|
||||
```
|
||||
|
||||
* generated `data.service.ts`
|
||||
|
||||
```ts
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class DataService {
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
```
|
||||
|
||||
## Add pipes
|
||||
|
||||
* [Reference](https://www.simplilearn.com./tutorials/angular-tutorial)
|
||||
* data transformation interface
|
||||
|
||||
```shell
|
||||
$ ng g pipe <nameofthepipe>
|
||||
|
||||
// generates
|
||||
// my-pipe.pipe.spec.ts
|
||||
// my-pipe.pipe.ts
|
||||
```
|
||||
|
||||
* generated `my-pipe.pipe.ts`
|
||||
|
||||
```ts
|
||||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
|
||||
@Pipe({
|
||||
name: 'myPipe'
|
||||
})
|
||||
export class MyPipePipe implements PipeTransform {
|
||||
|
||||
transform(value: unknown, ...args: unknown[]): unknown {
|
||||
return null;
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,190 @@
|
||||
# Terraform
|
||||
|
||||
* [Terraform]()
|
||||
|
||||
* Sample terraform `main.tf`
|
||||
|
||||
```terraform
|
||||
providers "aws" {
|
||||
region = ""
|
||||
access_key = ""
|
||||
secret_key = ""
|
||||
|
||||
}
|
||||
|
||||
# 1. create VPC
|
||||
resource "aws_vpc" "main" {
|
||||
cidr_block = "10.0.0.0/16"
|
||||
}
|
||||
|
||||
# 2. Create Internet Gateway
|
||||
resource "aws_internet_gateway" "gw" {
|
||||
vpc_id = aws_vpc.prod-vpc.id
|
||||
}
|
||||
|
||||
# 3. Create Custom Route Table
|
||||
resource "aws_route_table" "prod-route-table" {
|
||||
vpc_id = aws_vpc.prod-vpc.id
|
||||
|
||||
route {
|
||||
cidr_block = "0.0.0.0/0"
|
||||
gateway_id = aws_internet_gateway.gw.id
|
||||
}
|
||||
|
||||
route {
|
||||
ipv6_cidr_block = "::/0"
|
||||
gateway_id = aws_internet_gateway.gw.id
|
||||
}
|
||||
|
||||
tags = {
|
||||
Name = "Prod"
|
||||
}
|
||||
}
|
||||
|
||||
# 4. Create subnet
|
||||
resource "aws_subnet" "subnet-1" {
|
||||
vpc_id = aws_vpc.prod-vpc.id
|
||||
cidr_block = "10.0.1.0/24"
|
||||
availability_zone = "us-east-1a"
|
||||
|
||||
tags = {
|
||||
Name = "prod-subnet"
|
||||
}
|
||||
}
|
||||
|
||||
# 5. Associate subnet to route table
|
||||
resource "aws_route_table_association" "a" {
|
||||
subnet_id = aws_subnet.subnet-1.id
|
||||
route_table_id = aws_route_table.prod-route-table.id
|
||||
}
|
||||
|
||||
# 6. Create Security Group
|
||||
resource "aws_security_group" "allow_web" {
|
||||
name = "allow_tls"
|
||||
description = "Allow TLS inbound traffic"
|
||||
vpc_id = aws_vpc.prod-vpc.id
|
||||
|
||||
ingress {
|
||||
description = "HTTPS"
|
||||
from_port = 443
|
||||
to_port = 443
|
||||
protocol = "tcp"
|
||||
cidr_blocks = ["0.0.0.0/0"]
|
||||
|
||||
}
|
||||
|
||||
ingress {
|
||||
description = "HTTP"
|
||||
from_port = 80
|
||||
to_port = 80
|
||||
protocol = "tcp"
|
||||
cidr_blocks = ["0.0.0.0/0"]
|
||||
|
||||
}
|
||||
|
||||
ingress {
|
||||
description = "SSH"
|
||||
from_port = 22
|
||||
to_port = 22
|
||||
protocol = "-1"
|
||||
cidr_blocks = ["0.0.0.0/0"]
|
||||
|
||||
}
|
||||
|
||||
egress {
|
||||
from_port = 0
|
||||
to_port = 0
|
||||
protocol = "-1"
|
||||
cidr_blocks = ["0.0.0.0/0"]
|
||||
ipv6_cidr_blocks = ["::/0"]
|
||||
}
|
||||
|
||||
tags = {
|
||||
Name = "allow_web"
|
||||
}
|
||||
}
|
||||
|
||||
# 7. Create network interface
|
||||
resource "aws_network_interface" "web-server-nic" {
|
||||
subnet_id = aws_subnet.subnet-1.id
|
||||
private_ips = ["10.0.1.50"]
|
||||
security_groups = [aws_security_group.allow_web.id]
|
||||
|
||||
}
|
||||
|
||||
# 8. Elastic IP
|
||||
resource "aws_eip" "lb" {
|
||||
vpc = true
|
||||
instance = aws_instance.web-server-nic.id
|
||||
associate_with_private_ip = "10.0.1.50"
|
||||
depends_on = [aws_internet_gateway.gw]
|
||||
}
|
||||
|
||||
# 9. Create ubuntu server
|
||||
resource "aws_instance" "web-server-instance" {
|
||||
ami = ""
|
||||
instance_type = "t2.micro"
|
||||
availability_zone = "us-east-1a"
|
||||
key_name = "main-key"
|
||||
|
||||
network_interface {
|
||||
device_index = 0
|
||||
network_interface_id = aws_network_interface.web-server-nic.id
|
||||
}
|
||||
|
||||
user_data = <<-EOF
|
||||
#!/bin/bash
|
||||
sudo apt update -y
|
||||
sudo apt install apache2 -y
|
||||
sudo systemctl start apache2
|
||||
sudo bash -c 'echo your very first web server > /var/www/html/index.html'
|
||||
EOF
|
||||
tags = {
|
||||
Name = "web-server"
|
||||
}
|
||||
}
|
||||
|
||||
# console log value
|
||||
output "server_private_ip" {
|
||||
value = aws_instance.web-server-instance.private_ip
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
* Commands
|
||||
|
||||
```bash
|
||||
$ terraform init
|
||||
|
||||
$ terraform apply --auto-approve
|
||||
$ terraform apply [-target <instance>]
|
||||
|
||||
$ terraform destroy
|
||||
$ terraform destroy [-target <instance>]
|
||||
|
||||
$ terraform state list
|
||||
|
||||
$ terraform state show <name>
|
||||
|
||||
$ terraform refresh
|
||||
|
||||
$ terraform output
|
||||
```
|
||||
|
||||
|
||||
|
||||
* variable. `terraform.tfvars`
|
||||
|
||||
```terraform variable
|
||||
|
||||
# string variable
|
||||
subnet_prefix = "10.0.200.0/24"
|
||||
|
||||
# list of objects
|
||||
subnet_prefix = [{cidr_block = "10.0.1.0/24", name="subnet-1"}, {cidr_block = "10.0.2.0/64", name= "subnet-2"}]
|
||||
```
|
||||
|
||||
|
||||
|
||||
*
|
||||
Loading…
Reference in New Issue