We have built an environment for creating front components using the following technologies.
The purpose is to use the above, but since I will not touch on React/TypeScript in this article, I think that it can be used to build an environment that uses Node.js.
The reason why I use Vagrant as well as Docker is that my development environment is mac. This is to eliminate the slow operation for the reasons described in the reference article.
You need to install Vagrant and Mutagen described in the reference article. The environment of the author is as follows.
Create the following four files. Each file can be placed in the same directory.
When you start it, start it from vagrant, ssh it in the virtual machine, and start docker.
Vagrantfile This file describes the configuration of the virtual machine to be created.
Vagrant.configure('2') do |config|
config.vm.box = 'ubuntu/focal64'
config.vm.hostname = 'frontcomponent'
config.vm.network :private_network, ip: '192.168.60.10'
config.vm.network 'forwarded_port', guest: 8000, host: 8000
config.vm.provider :virtualbox do |vb|
vb.gui = false
vb.cpus = 2
vb.memory = 4096
vb.customize ['modifyvm', :id, '--natdnsproxy1', 'off']
vb.customize ['modifyvm', :id, '--natdnshostresolver1', 'off']
end
config.disksize.size = '15GB'
config.mutagen.orchestrate = true
config.vm.synced_folder './', '/home/vagrant/front_component', type: "rsync",
rsync_auto: true,
rsync__exclude: ['.git/', 'log/', 'tmp/']
config.vm.provision 'shell', inline: <<-SHELL
echo "fs.inotify.max_user_watches = 65536" >> /etc/sysctl.conf && sysctl -p
curl -fsSL https://get.docker.com -o get-docker.sh
sh get-docker.sh
usermod -aG docker vagrant
#Adjust ver when updating docker
curl -L "https://github.com/docker/compose/releases/download/1.27.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
chmod +x /usr/local/bin/docker-compose
SHELL
end
The port settings are set according to the environment that you will use in the future.
Also, regarding the setting of specifications such as vm.provider, I think that it is better to tune with the PC you are using.
Other points I've been addicted to and added after reading the reference articles are as follows. Please be careful when using it.
hostname It seems that "_" cannot be used. Please note that it is easy to make a mistake if you enter the service name.
fs.inotify.max_user_watches If there is a directory that pulls in external files such as node_modules, the number of files may become too large and an error may occur. In that case, I think it is correct to exclude it from the mount of the file, but if it is not mounted locally such as the typescript definition file, the type definition file in node_modules could not be found and added when editing the code. If you have good knowledge, I would like to hear your opinion.
mutagen.yml
sync:
app:
mode: "two-way-resolved"
alpha: "./"
beta: "frontcomponent:/home/vagrant/front_component"
ignore:
vcs: true
paths:
- "/log"
- "/tmp"
Use mutagen for file synchronization with vagrant. As for the details, I have not caught up with the understanding enough to summarize in the article, so I think that you should refer to the reference article.
Dockerfile Based on the Docker image file located in Docker Hub Create a base image of the container to be used this time.
FROM node:15.5.1
ENV LANG C.UTF-8
ENV WORKSPACE=/var/www/front_component/
RUN curl -sL https://deb.nodesource.com/setup_15.x | bash -
RUN apt install -y less build-essential nodejs
RUN apt install -y vim less
RUN npm install n -g
RUN n 14.15.4
WORKDIR $WORKSPACE
Based on the image placed on Docker Hub, create a base image for this environment construction. This time, I'm assuming that react/typescript will be installed in the future, so I'm installing npm with the image of node.
docker-compose.yml
version: '3.7'
services:
front:
build: .
image: front:1.0
container_name: front
tty: true
stdin_open: true
ports:
- "8000:8000"
environment: {}
volumes:
- .:/var/www/front_component
# command: "bash -c 'npm i && npm run watch'"
It is a setting for creating a container. The comment out part is supposed to be used after inserting react/typescript in the future, Since it is not used in the environment construction so far, it is commented out.
#Use the cd command to move to the directory where the file created above is located.
vagrant up #Launch of vagrant
vagrant ssh #Access vagrant with ssh
cd front_component #Move to the directory that mounts the files local to vagrant
docker-compose up -d #Launch docker
This completes the environment startup.
In addition to the above commands, I will list the commands that I often use. It is only a brief explanation, so please check it if you want to use it properly.
vagrant up #Launch of vagrant
vagrant ssh #Ssh access to the launched vagrant
vagrant halt #Exit vagrant
vagrant destroy #Delete the entire disguise image created with vagrant
docker ps #Check the image of running docker
docker exec -ti <Container name> /bin/bash #Access inside the container like ssh
docker attach <Container name> #View processes running in a container
docker logs <Container name> #Used to see the log etc. at the end of the forcibly terminated container
First post ε ('∞' *)
Recommended Posts