[Docker] Docker run emits "name is already in use" error

Background

When trying to docker run through docker compose, name is already in use appeared.

Solutions

Using docker ps -a, we will find there are docker containers created with the same name, it may due to docker compose stop not cleanly close all the containers.

To solve, find out, we can try to close all the running containers (you can find which one's name is duplicated, but I want to make life easier), docker stop $(docker ps -a -q), re-run the docker compose script again

References

• docker run --> 'name is already in use by container'
• https://coderwall.com/p/ewk0mq/stop-remove-all-docker-containers
• Docker error bind address already in use

[CSS] Meaning of margin:auto

Background

Sometimes we need to fulfill situation which we want to line up several components in a row and the last component leans on the right most of the div

Solutions

This comes to marginLeft/Right: auto, when we try to mark the container component with margin-left: auto, the container takes all the spaces available to the left hence position the switch button at the right most of the container.

That explains why when we left / right margin the DIV, we can center it at the center.

References

• What does margin auto mean?
  
• What is the meaning of `auto` value in a CSS property.
  

[JS] Onclick listener confusion in div inside div

Background

Sometimes we face situations when we have 2 layers of components (e.g. DIVs), while original (outer) div already configured with onclick listener but on top of the parent div, we also want the child div to have the same onClick listener.

Needless to say, the onclick action listener will be at the top will be fired first, and the parent one (underneath), which is not what we want, we want only child one to be detected and fired events

Solutions

This is related to event bubbling and event capturing. For event bubbling, clicking the inside DIV will trigger the event outside DIV, we need to stop both bubbling event and capturing event by e.stopPropagation and e.cancelBubble

References

• Howto: div with onclick inside another div with onclick javascript
• Binding and event handler — passing the event object
  
• React prevent event bubbling in nested components on click

Multiple accounts management in gitlab

Background

Having 2 different gitlab accounts one is for company and the other one is personal, I would like both work independently on the machine at home, pull source code separately with their corresponding username and repository.

Problems

Very often I encountered a situation with permission denied in my company account while listing the remote repository of do anything remote (like git pull), but I can only make my personal account work without success on my company account. Turns out git client is wrongly picking the my personal account ssh information to login to my working account causing the "permission right" error.

Solutions

1. Refer to ~/.ssh/config and update the config file, add 1 more ssh entry to my company gitlab account as follows

Host anywhere.gitlab.com
  PubkeyAcceptedKeyTypes +ssh-rsa
  HostName gitlab.com
  IdentitiesOnly yes
  IdentityFile ~/.ssh/id_rsa2
  User ihmcjacky

Host maxwellhk.gitlab.com
  PubkeyAcceptedKeyTypes +ssh-rsa
  HostName gitlab.com
  IdentitiesOnly yes
  IdentityFile ~/.ssh/id_rsa
  User maxwellhk

Here, we have 2 users, 1 is ihmcjacky for my company usage, another is for my private usage, HostName parameter both specified as gitlab.com, but the Host which is very important, it acts as an alias for git client to identify which configuration it should refer to when trying to login to gitlab. Name anything familiar to you. In my case anywhere.gitlab.com and maxwellhk.gitlab.com.

2. Go to the desired project (in my case, company repository), navigate to .git folder and open config, configure the username and user email manually so as to let git client not to use globally configured settings for log in. Also in remote-origin url settings, configure as follows

url = git@anywhere.gitlab.com:p2Firmware/p2_controller.git

The anywhere.gitlab.com here is important, it is the alias we specified in ~/.ssh/config.

For safety, we can follow References > Multiple SSH keys for different accounts on Github or Gitlab, go through the processes, delete the cached keys and add back the ssh entries and check the ssh connection

3. Finally, add back the new origin URL to the project by using git remote set-url origin new.git.url/here

References

• Git pushing to remote GitHub repository as wrong user
  
• Multiple SSH keys for different accounts on Github or Gitlab
  
• Configure SSH to a different directory
  
• https://medium.com/uncaught-exception/setting-up-multiple-gitlab-accounts-82b70e88c437
  

[HTML&CSS] Vertical align 2 elements

Background

Very often we want to align 2 DIVs vertically and middle aligned with each other, like image and div, or 2 DIVs.

How

1. Declare the css "display: flex" or "display: inline-flex" at the parent container with "align-items: center"
2. Put the items we want to align inside the parent container

Quoting from stackoverflow's answer

References

• css: vertical-align image with text inside span
  
• https://wcc723.github.io/css/2017/07/21/css-flex
• A Complete Guide to Flexbox
  

[AWS & Docker] Add ec2 instance to specific cluster

Background

By default, when we create a new ec2 instance, ecs will automatically assign that ec2 instance to the cluster named "default", but we want ecs to put it in an already created cluster.

How

When creating the ec2 instance, remember 3 major things

1. Select "ECS-optimized" instances in AMI community
2. Create IAM "ecsInstanceRole" to allow ecs have the right to run commands in ec2 instances
• Refer to https://docs.aws.amazon.com/AmazonECS/latest/developerguide/instance_IAM_role.html for more info
3. Configure "User Data" entry to let ecs know which cluster we want to place the ec2 instance to

#!/bin/bash
echo ECS_CLUSTER=[CLUSTER_NAME] >> /etc/ecs/ecs.config

References

• [AWS ECS] 將建立的 EC2 instance 加入指定的 Cluster
• Launching an Amazon ECS Container Instance Point (g)

[AWS / Docker] Update Docker Images only in ECS Tasks

Background

So here is the problem, usually web applications needs updating, and more often the update is not about server setup, but application content, like updating the product images, prices etc. In this case, docker images needs to be updated, well of course, we need to rebuild and push the images to AWS docker registry again. But how do we update the service to reflect the new changes of the mounted images?

Solutions

We used "update-service" command, and "force-deployment" to force update the docker images although they are with the same tags.

aws ecs update-service --service my-service --force-new-deployment --cli-input-json myConfigJson

where service is the AWS service name and cli-input-json parameter specifies other useful attributes needed.

References

• Update docker images in ECS tasks