docker搭建前端开发环境 docker是前端还是后端

转载

编程小达人之心 2023-08-11 16:55:02

文章标签 docker搭建前端开发环境 nginx docker spring boot 后端 文章分类 Docker 云计算

1. 前端部署

1.1 下载docker

yum intall docker
docker -v # 看看版本
systemctl start docker # 启动docker

1.2 下载并配置nginx

docker pull nginx # 通过docker下载nginx，不带版本号会下载最新版

docker搭建前端开发环境 docker是前端还是后端_spring boot

所谓挂载目录就是，我们不必将nginx的配置文件放到nginx内部的路径下面，我们可以指定一个文件夹放置，并挂载到内部文件夹下面。

mkdir -p /data/nginx/{conf,conf.d,html,logs} # 例如我们可以创建以下四个文件夹放置我们的配置文件

docker搭建前端开发环境 docker是前端还是后端_nginx_02

2. 编辑nginx.conf文件

创建配置文件nginx.conf并使用notepad++编辑，然后将下面内容复制进去并保存。更改需要更改的地方
然后将nginx.conf文件放入改成创建的conf文件夹中，看一下我用中文注释的地方

user  root;  # 服务器的用户名
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       80;   # 访问前端时端口默认80，就不需要再敲端口号(根据你实际更改此处)
        server_name  121.5.168.45; # 服务器的ip地址 (根据你实际更改此处)

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / { 
            root  /usr/share/nginx/html; # 注意这里是被挂载目录，即你存放dest文件的实际地址会映射(挂载)到这个地方(不用改)
			try_files $uri $uri/ /index.html last; # 查找index.html
            index  index.html index.htm; 
        }

        #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服务的地方

    # 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;
    #    }
    #}

}

编辑default.conf文件

与上面同理，编辑好后将default.conf文件放入conf.d文件夹中，看一下我用中文注释的地方

server {
    listen       80;# 配置监听端口(根据你实际更改此处)
    server_name  121.5.168.45;# 配置域名(根据你实际更改此处)


    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location /mystatus {# 关于nginx 的客户端的状态
        stub_status;
    }

    # 与上面相同故不在赘述
    location / {
        root   /usr/share/nginx/html;
        try_files $uri $uri/ /index.html last;
        index  index.html index.htm;
    }


    #error_page  404              /404.html;


    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  404 /50x.html; # 修改404 状态码的对应的指向的访问目录，修改后需重启服务器。
    location = /50x.html {
        root   /usr/share/nginx/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;
    #}
}

4.将前端项目打包

npm run build

会生成一个dest的文件，把dest文件下的内容打成一个zip放入挂载目录的html中。
在/home/todolist/html(这是自定义的)下使用upzip解压

upzip dest.zip
rm -f dest.zip

(4)使用docker运行nginx

docker run --name nginx01 -d -p 80:80 -v /home/todolist/html:/usr/share/nginx/html -v /data/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /data/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf --privileged=true nginx

docker搭建前端开发环境 docker是前端还是后端_nginx_03

这时候就部署成功了！！可以看看我下面的解释

# 可以通过一些命令来查看当前docker容器的状态
docker ps # 列出正在运行的容器
docker images # 列出所有的镜像 如nginx、mysql

解释：左边是实际我们自定义存放的位置，右边是nginx内部目录

第一个-v代表

html下的文件实际位置在：/home/todolist/html
被挂载的nginx内部目录为：/usr/share/nginx/html

第二个-v代表

nginx.conf的实际位置在：/data/nginx/conf/nginx.conf
被挂载的nginx内部目录为：/etc/nginx/nginx.conf

第三个-v代表

default.conf的实际位置在：/data/nginx/conf.d/default.conf
被挂载的nginx内部目录为：/etc/nginx/conf.d/default.conf

必须要有权限才可以设置：–privileged=true
nginx01代表container的名字，可以自己取

nginx配置完成，你可以访问ip地址看看能不能看到点什么

2. MySQL部署

2.1 下载mysql

docker pull mysql:5.7.27 # 使用docker拉取指定版本的mysql

docker搭建前端开发环境 docker是前端还是后端_docker搭建前端开发环境_04

2.2 启动mysql并设置初始密码

docker run --name mysql01 -e MYSQL_ROOT_PASSWORD=123456 -p 3306:3306 -d mysql:5.7.27

2.3 要运行的sql复制到容器的tmp目录下

docker ps -a # 查看container id
docker cp database.sql 0e1a279b2541:/tmp/ # 0e1a279b2541为container id

docker搭建前端开发环境 docker是前端还是后端_后端_05

2.4 进入到mysql容器的bash里运行sql文件

docker exec -it container-id bash # 进入mysql容器
mysql -uroot -p

docker搭建前端开发环境 docker是前端还是后端_docker搭建前端开发环境_06

source /tmp/database.sql

docker搭建前端开发环境 docker是前端还是后端_后端_07

mysql部署完成

3. 后端Springboot项目部署

编写名为 Dockerfile 文件(无后缀)，使用Dockerfile就可以自定义container。使用notepad++编辑，并复制以下内容，根据实际情况修改。

FROM java:8  # 容器镜像和版本
EXPOSE 8888 # 暴露端口(服务端口)
VOLUME /tmp # 存放文件的tmp
ADD todolist-0.0.1-SNAPSHOT.jar app.jar # 将todolist-0.0.1-SNAPSHOT.jar别名为app.jar
RUN bash -c 'touch /app.jar' 
ENTRYPOINT ["java", "-jar", "/app.jar"]

然后将Dockerfile文件和要运行ja的jar包放在一起，编排容器：

docker build -t todolist01 . # 不要忘了有个点，todolist01为自定义的名字
docker run -d -p 8888:8888 todolist01 # 参数-d 是让容器后台运行 
# -p 是做端口映射，此时将服务器中的8888端口(左边)映射到容器中的8888(右边)端口

docker搭建前端开发环境 docker是前端还是后端_docker搭建前端开发环境_08

后端部署完成项目成功跑起来啦

docker搭建前端开发环境 docker是前端还是后端_后端_09

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：pigx技术架构图技术架构白皮书

下一篇：java中view层是干什么的 java中view的意思

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯