学习在Macbook Pro M1中对你的Laravel和React.JS应用程序进行Docker化处理

尼耳多
252 阅读4分钟

带有M1专业芯片的新Macbook Pro。图片来源：dlxmedia.huonUnsplash。

最近几年，苹果公司发布了一项新技术，让很多人感到惊讶。在我看来，名为M1的新集成芯片成功地提供了惊人的性能和最佳的成本效益比。但一项新技术仍然需要一段时间才能达到成熟。这很简单：没有多少应用程序在这种环境下原生运行。是的！，这个好消息也伴随着坏消息。但苹果并没有放过我们，他们给了我们一个 "临时 "的解决方案，叫做Rosetta。

用例架构

我们将有两个应用程序,一个后端使用laravel, 一个前端使用React.Js。后端laravel应用程序将访问MySQL数据库，它也运行在Docker容器中。

用例架构图。

Docker桌面安装

首先，让我们用苹果芯片下载并安装Docker Dekstop。安装完成后，你可以注意到Docker Desktop在菜单栏中的新图标。

菜单栏中的Docker Desktop图标.

使用Docker设置你的Laravel应用程序

在你的项目中创建两个文件, 即Dockerfile和docker-compose.yml。

FROM php:7.2-apache
RUN docker-php-ext-install mysqli pdo pdo_mysql && docker-php-ext-enable mysqli pdo pdo_mysql
RUN a2enmod rewrite
  1. 我使用的镜像是php:7.2-apache.你可以根据你的要求来调整。这里我使用PHP7.2只是因为我想适应生产环境的配置。
  2. 这个图像仍然是非常基本的。我需要几个PHP扩展（库），如MySQL驱动。最后我需要的是Url Rewrite模块，以确保Laravel的正常工作。
version: '3.8'

volumes:
  composer-vol:
services:
  web:
    build: .  
    container_name: web-dashboard-api
    restart: unless-stopped
    volumes:
      - './public:/var/www/html'
      - './:/var/www/'
    ports:
      - 82:80
    networks:
          - ptpn-database_default
networks:
  ptpn-database_default:
    external: true
  1. 使用的图像已经在Docker文件中提到了.我们只需要确保这一行在我们的配置中存在: build: .
  2. 我给这个容器起了个名字叫web-dashboard-api，然后用82号端口发布网络。
  3. 容器中的公共文件夹位于html文件夹中。所以我们需要把public文件夹映射到html文件夹。'./public:/var/www/html'。它还需要另一部分，也就是位于super文件夹中的源代码和库。所以我们需要映射当前文件夹：'./:/var/www/'。
  4. 最后，因为MySQL数据库也在容器中运行，我们需要在容器之间建立一个网络桥。注意这个名字的部分：tpn-database_default。

安装依赖性并编译起来

  1. 在你的项目文件夹中运行 composer install 命令。
  2. 运行docker compose：docker compose -f "docker-compose.yml" up -d --build，然后在Docker Desktop的容器部分检查你的应用程序。

Docker Desktop的容器部分。

使用Docker设置你的React.JS应用程序

在你的项目中创建两个文件，即Dockerfile和docker-compose.yml。

FROM node:16.5
# RUN apt-get update
# RUN apt-get install -y python2
COPY . .
CMD ["yarn", "start"]
  1. 我使用的镜像是node:16.5。我建议你使用node的LTS版本。我在最新版本中收到了一堆错误。
  2. 如果你发现与python有关的错误，用apt-get取消第二和第三行的注释。
  3. 接下来，我们需要将所有文件复制到容器中，并运行应用程序。
version: '3.8'

services:
  web:
    build: .  
    container_name: web-dashboard-reactjs
    restart: unless-stopped
    ports:
      - 3000:3000
  1. 使用的镜像已经在Docker文件中提到。我们只需确保这一行在我们的配置中存在：build: .
  2. 我给容器起了个名字叫web-dashboard-reactjs，用3000端口发布网络。

安装依赖项并编译起来

  1. 我没有使用Rosetta，也不打算使用它。我因此得到了很多错误，比如说。错误。Node Sass尚不支持你当前的环境。OS X 不支持的架构（arm64）与不支持的运行时间（88）更多关于支持哪些环境的信息请看。
  2. 解决办法：（a）在本地，确保你使用的是node的LTS版本；（b）运行这个命令npm install node-sass@npm:sass。
  3. 在你的项目文件夹中运行这些命令 rm -R node_modules 和 composer install。
  4. 运行docker compose：docker compose -f "docker-compose.yml" up -d --build，然后在Docker Desktop的容器部分检查你的应用程序。

Docker Desktop的容器部分。

总结

  1. 使用Docker构建应用程序使很多事情变得简单，我们可以用Docker Desktop轻松设置Laravel和React.JS。
  2. 我们可以将React.JS应用程序部署到Macbook Pro M1的容器中，而无需使用Rosetta。
  3. 苹果的硅芯片速度很快，但也有一些缺点。作为一个程序员，确保我们在购买这台漂亮的电脑之前考虑好一切。

avatar
文章
阅读
粉丝