注册

前端要懂的Docker部分

前言


最近学习部署的时候，发现前端部署可以通过多种方式来进行部署，web服务器,Docker,静态部署:Github page,网站托管平台:Vercel,还有一些自动化部署的东西目前还没有学到...


Docker开始


简介


Docker是一个应用打包，分发，部署的工具，它就相当于一个容器，将你想要的一些依赖、第三方库、环境啥的和代码进行一块打包为镜像，并上传到镜像仓库里面，这样别人可以直接从镜像仓库里面直接拉去这个代码来进行运行，可以适应不同的电脑环境，打造了一个完全封闭的环境。



  • 打包：将软件运行所需要的依赖、第三方库、软件打包到一起，变成一个安装包
  • 分发：将你打包好的安装包上传到一个镜像 仓库，其他人可以很方便的获取安装
  • 部署：拿着安装包就可以一个命令运行起来你的应用，自动模拟出一摸一样的运行环境

为什么使用Docker



Docker 的出现主要是为了解决以下问题：“在我的机器上运行正常，但为什么到你的机器上就运行不正常了？”。



平常开发的时候，项目在本地跑的好好的，但是其他人想要在他的电脑上去跑你的应用程序，但是却跑不起来，他得配置数据库，Web 服务器，插件啥的，非常不方便。Docker的出现解决了这些问题。


基本术语


镜像：理解为软件安装包，可以方便的进行传播和安装,它包含了运行应用程序所需的所有元素，包括代码、运行时环境、库、环境变量和配置文件。



  • 镜像可以通过Dockerfile来进行创建
  • Dockerfile就相当于一个脚本，编写一些命令，他会识别这些命令并且执行

容器：软件安装后的状态，每个软件运行的环境都是独立的、隔离的，称之为容器。


仓库:仓库是存放 Docker 镜像的地方。仓库允许你分享你的镜像，你可以将你的镜像推送（push）到仓库，也可以从仓库拉取（pull）其他人分享的镜像。



  • Docker 提供了一个公共的仓库 Docker Hub，你可以在上面上传你的镜像，或者寻找你需要的镜像。

常见命令



  • docker run: 用于从 Docker 镜像启动一个容器。例如，docker run -p 8080:80 -d my-app 将从名为 "my-app" 的 Docker 镜像启动一个新的容器，并将容器的 8080 端口映射到主机的 80 端口。
  • docker build: 用于从 Dockerfile 构建 Docker 镜像。例如，docker build -t my-app . 将使用当前目录中的 Dockerfile 构建一个名为 "my-app" 的 Docker 镜像。
  • docker pull: 用于从 Docker Hub 或其他 Docker 注册服务器下载 Docker 镜像。例如，docker pull nginx 将从 Docker Hub 下载官方的 Nginx 镜像。
  • docker push: 用于将 Docker 镜像推送到 Docker Hub 或其他 Docker 注册服务器。例如，docker push my-app 将名为 "my-app" 的 Docker 镜像推送到你的 Docker Hub 账户。
  • docker ps: 用于列出正在运行的 Docker 容器。添加 -a 选项（docker ps -a）可以列出所有容器，包括已停止的。
  • docker stop: 用于停止正在运行的 Docker 容器。例如，docker stop my-container 将停止名为 "my-container" 的 Docker 容器。
  • docker rm: 用于删除 Docker 容器。例如，docker rm my-container 将删除名为 "my-container" 的 Docker 容器。
  • docker rmi: 用于删除 Docker 镜像。例如，docker rmi my-app 将删除名为 "my-app" 的 Docker 镜像。
  • docker logs: 用于查看 Docker 容器的日志。例如，docker logs my-container 将显示名为 "my-container" 的 Docker 容器的日志。
  • docker exec: 用于在正在运行的 Docker 容器中执行命令。例如，docker exec -it my-container bash 将在名为 "my-container" 的 Docker 容器中启动一个 bash shell。
    docker常见命令


ps:不会使用就:docker load --help



编写Dockerfile


FROM nginx:latest

# 定义作者
MAINTAINER Merikle


#删除目录下的default.conf文件

#RUN rm /etc/nginx/conf.d/default.conf

#设置时区
RUN cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && echo 'Asia/Shanghai' >/etc/timezone


#将本地nginx.conf配置覆盖nginx配置
COPY nginx.conf /etc/nginx/nginx.conf

# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/

#声名端口
EXPOSE 8748

RUN echo 'web project build  success!!'

FROM:指定基础镜像


RUN:一般指安装的过程


COPY:拷贝本地文件到镜像的指定目录


ENV:环境变量


EXPOSE:指定容器运行时监听到的端口，是给镜像的使用者看的


ENTRYPOINT：镜像中应用的启动命令，容器运行时调用


编写完Dockerfile生成镜像:


docker build -t test:v1 .


运行镜像:


docker run -p 8080:8080 --name test-hello test:v1


意思:跑在8080端口将test:v1命名为text-hello


之后你可以发布到上面说的仓库里面




  • 命令行登录账号： docker login -u username
  • 新建一个tag，名字必须跟你注册账号一样 docker tag test:v1 username/test:v1
  • 推上去 docker push username/test:v1
  • 部署试下 docker run -dp 8080:8080 username/test:v1

实践一下Docker部署前端项目


核心思想:


将前端打包的dist放到nginx里面，然后添加一个nginx.conf文件。


docker的话就是多了一个Dockerfile文件来构建镜像而已。


nginx.conf文件的编写


#nginx.conf文件编写
#user  nobody;

worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;



events {

    worker_connections  1024;

}



http {

    include       mime.types;

    default_type  application/octet-stream;

#log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
#                  '$status $body_bytes_sent "$http_referer" '
#                  '"$http_user_agent" "$http_x_forwarded_for"';

#access_log  logs/access.log  main;


    sendfile        on;
#tcp_nopush     on;

#keepalive_timeout  0;

    keepalive_timeout  65;

#gzip  on;


    server {
#监听的端口

        listen       8748;
#请填写绑定证书的域名或者IP

        server_name  121.199.29.3;


		gzip on;

		gzip_min_length 1k;

		gzip_comp_level 9;

		gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

		gzip_vary on;

		gzip_disable "MSIE [1-6]\.";

#charset koi8-r;

#access_log  logs/host.access.log  main;


        location / {

            root   /usr/share/nginx/html;

        	index  index.html index.htm;

        	try_files $uri $uri/ /index.html;

        }

#error_page  404              /404.html;

# redirect server error pages to the static page /50x.html
#

        error_page   500 502 503 504  /50x.html;
location = /50x.html {

            root   html;

        }

# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
#    proxy_pass   http://127.0.0.1;
#}

# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
#    root           html;
#    fastcgi_pass   127.0.0.1:9000;
#    fastcgi_index  index.php;
#    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
#    include        fastcgi_params;
#}

# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
#    deny  all;
#}

    }


# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
#    listen       8000;
#    listen       somename:8080;
#    server_name  somename  alias  another.alias;

#    location / {
#        root   html;
#        index  index.html index.htm;
#    }
#}


# HTTPS server
#
#server {
#    listen       443 ssl;
#    server_name  localhost;

#    ssl_certificate      cert.pem;
#    ssl_certificate_key  cert.key;

#    ssl_session_cache    shared:SSL:1m;
#    ssl_session_timeout  5m;

#    ssl_ciphers  HIGH:!aNULL:!MD5;
#    ssl_prefer_server_ciphers  on;

#    location / {
#        root   html;
#        index  index.html index.htm;
#    }
#}


}


Dockerfile文件的编写


# Dockerfile文件


FROM nginx:latest
# 定义作者

MAINTAINER Merikle

#删除目录下的default.conf文件
#RUN rm /etc/nginx/conf.d/default.conf
#设置时区

RUN cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && echo 'Asia/Shanghai' >/etc/timezone

#将本地nginx.conf配置覆盖nginx配置

COPY nginx.conf /etc/nginx/nginx.conf
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面

COPY dist/  /usr/share/nginx/html/
#声名端口

EXPOSE 8748


RUN echo 'web project build  success!!'


然后将这些压缩成zip(或者本地打包为镜像，然后上传到镜像仓库里面，在服务器里面拉取镜像就可以了)，然后传到服务器中，进行解压，构建镜像并且运行镜像来进行前端部署。


部署node项目


Dockerfile的编写


FROM node:11

MAINTAINER Merikle


# 复制代码

ADD . /mongo-server


# 设置容器启动后的默认运行目录

WORKDIR  /mongo-server


# 运行命令，安装依赖
# RUN 命令可以有多个，但是可以用 && 连接多个命令来减少层级。
# 例如 RUN npm install && cd /app && mkdir logs

RUN npm install --registry=https://registry.npm.taobao.org


# CMD 指令只能一个，是容器启动后执行的命令，算是程序的入口。
# 如果还需要运行其他命令可以用 && 连接，也可以写成一个shell脚本去执行。
# 例如 CMD cd /app && ./start.sh

CMD node app.js

然后构建镜像


发布镜像到hub上面


在服务器上面进行拉取镜像并且运行镜像。


部署mongodb


这个还没有部署，之后再说啦。


作者：Charlotten
来源：juejin.cn/post/7332290436345905187
0
分享
2024-02-21

0 个评论

要回复文章请先登录或注册

一个开放、互助、协作、创意的社区

关于imGeek
关于专职工程师值守
社区财富榜
赞助商
友情链接
热门标签
京ICP备2023000793号