使用Docker部署前端项目实战教程,该踩的坑我都帮你踩了!(上)

简介: 使用Docker部署前端项目实战教程,该踩的坑我都帮你踩了!

前置工作

1、需要准备的东西

一台Centos服务器并连接

20210824232144111.png

我这是演示用的垃圾云,建议大家上阿里云、腾讯云等。

2、连接云服务器

连接服务器看文章: https://blog.csdn.net/qq_32442973/article/details/119840447


安装Docker环境

Docker有两个分支版本:Docker CEDocker EE,即社区版和企业版。本教程基于CentOS 7安装Docker CE。

1、安装Docker的依赖库。

yum install -y yum-utils device-mapper-persistent-data lvm2

2、添加Docker CE的软件源信息。

docker官方源:

sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

或者使用国内阿里云源(安装太慢/无法安装可以考虑用这个):

sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-c

出现以下内容则代表设置源成功:

20210826203130758.png

3、安装Docker CE。

可以查看所有仓库中所有docker版本,并选择特定版本安装

yum list docker-ce --showduplicates | sort -r

20210826205233442.png

下面是安装方式

sudo yum install docker-ce #由于repo中默认只开启stable仓库,故这里安装的是最新稳定版 3:20.10.8-3.el7
sudo yum install <FQPN>  # 例如:sudo yum install docker-ce-17.12.0.ce

我用第一种安装方式。

4、启动Docker服务。

1. sudo systemctl start docker #  启动docker
2. sudo systemctl enable docker # 设置开机自启

20210827200029869.png

若不设置开机自启,那么一但服务器宕机或者重启,就得手动输命令重新启动,很麻烦。


准备Dockerfile并部署项目(构建新的业务镜像)

1、准备nginx.conf.template、Dockerfile、dist(前端项目build后的包)


为了方便管理我们统一放在目录frontend-docker下,以下代码段为步骤:

# 第一步
cd /
# 第二步 创建文件夹
mkdir frontend-docker
# 第三步
cd frontend-docker
# 第四步 创建nginx.conf.template并编辑好保存
vi nginx.conf.template #打开编辑贴上下面的文件内容再按 esc 然后 : wq保存
# 第五步 创建Dockerfile文件并编辑好保存
vi Dockerfile #打开编辑贴上下面的文件内容再按 esc 然后 : wq保存
# 第五步 上传vue项目build后的dist文件夹


nginx.conf.template 文件内容

user nginx;
#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       80;
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            root   /dist;
      #try_files $uri /index.html; #解决路由重定向跳转 404 页面配置
            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;
        }
    }
    # 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文件内容 (业务镜像构建流程

FROM nginx:latest
RUN mkdir /dist
COPY ./dist /dist
COPY ./nginx.conf.template /
CMD envsubst < /nginx.conf.template > /etc/nginx/nginx.conf \
  && cat /etc/nginx/nginx.conf \
  && nginx -g 'daemon off;'

该文件里主要是安装了nginx,复制dist、nginx.conf.template、启动nginx的步骤。

20210827202701284.png

注意:你复制粘贴时可能会无意丢掉头部几个单词,注意检查文件内容是否一致。


相关文章
|
1天前
|
Java 应用服务中间件 Linux
【Docker容器化技术】docker安装与部署、常用命令、容器数据卷、应用部署实战、Dockerfile、服务编排docker-compose、私有仓库
本文主要讲解了Docker的安装与部署、常用命令、容器数据卷、应用部署实战、Dockerfile、服务编排docker-compose、私有仓库以及Docker容器虚拟化与传统虚拟机比较。
【Docker容器化技术】docker安装与部署、常用命令、容器数据卷、应用部署实战、Dockerfile、服务编排docker-compose、私有仓库
|
7天前
|
SQL 关系型数据库 数据库
国产数据实战之docker部署MyWebSQL数据库管理工具
【10月更文挑战第23天】国产数据实战之docker部署MyWebSQL数据库管理工具
40 4
国产数据实战之docker部署MyWebSQL数据库管理工具
|
5天前
|
前端开发 数据管理 测试技术
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试,Cypress则擅长端到端测试,模拟用户交互。通过结合使用这两种工具,可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
15 2
|
6天前
|
前端开发 JavaScript 数据可视化
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第26天】前端自动化测试在现代软件开发中至关重要,Jest和Cypress分别是单元测试和端到端测试的流行工具。本文通过解答一系列问题,介绍Jest与Cypress的实战应用与最佳实践,帮助开发者提高测试效率和代码质量。
19 2
|
11天前
|
存储 缓存 算法
前端算法:优化与实战技巧的深度探索
【10月更文挑战第21天】前端算法:优化与实战技巧的深度探索
11 1
|
12天前
|
人工智能 资源调度 数据可视化
【AI应用落地实战】智能文档处理本地部署——可视化文档解析前端TextIn ParseX实践
2024长沙·中国1024程序员节以“智能应用新生态”为主题,吸引了众多技术大咖。合合信息展示了“智能文档处理百宝箱”的三大工具:可视化文档解析前端TextIn ParseX、向量化acge-embedding模型和文档解析测评工具markdown_tester,助力智能文档处理与知识管理。
|
12天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
23天前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
19天前
|
JavaScript 前端开发 Docker
拿下奇怪的前端报错(二):nvm不可用报错`GLIBC_2.27‘‘GLIBCXX_3.4.20‘not Found?+ 使用docker构建多个前端项目实践
本文介绍了在多版本Node.js环境中使用nvm进行版本管理和遇到的问题,以及通过Docker化构建流程来解决兼容性问题的方法。文中详细描述了构建Docker镜像、启动临时容器复制构建产物的具体步骤,有效解决了不同项目对Node.js版本的不同需求。
|
20天前
|
资源调度 前端开发 安全
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
34 0