Docker构建时出现"react-scripts: not found"错误

Question

我正在使用create-react-app，并希望使用Docker发布我的项目。我使用命令docker build . -t react-docker，但出现了以下错误：

/bin/sh: 1: react-scripts: not found error Command failed with exit code 127.

我尝试删除package-lock.json文件并再次运行npm install，但问题并未解决。

Dockerfile内容如下：

# stage: 1 
FROM node:8 as react-build 
WORKDIR /app 
COPY . ./ 
RUN yarn 
RUN yarn build 
# stage: 2 — the production environment 
FROM nginx:alpine 
COPY — from=react-build /app/build /usr/share/nginx/html 
EXPOSE 80 
CMD [“nginx”, “-g”, “daemon off;”]

- Banafshe Alipour

---

你能分享一下你的Dockerfile吗？ - juanlumn

你确认 react-scripts 在 package.json 中吗？ - Bless

@Bless 是的，"react-scripts": {"version": "2.1.3", ... - Banafshe Alipour

你有一个 .dockerignore 文件吗？（可能与这个问题无关） - Bless

让我们在聊天室里继续这个讨论。 - Bless

Answer 1

你正在使用卷吗？ 在正常安装下，Docker应该可以访问您的资源。 但是我在我的同事机器上看到了一些奇怪的权限问题。 因此，当尝试运行“yarn install”时，docker无法写入。 所以没有创建node_modules（就像你在讨论中描述的那样）。 因此没有react-scripts。

解决方案：授予其他人访问您想要挂载的位置或不使用卷。

- rapiz

---

是的，在处理卷时，这个方法不起作用。我把我的存储库克隆到了OneDrive中，它是网络存储，但仍然会出现相同的错误。 - Kayvan Shah

Answer 2

如果不需要将其变成两个步骤的过程，可以在一个Dockerfile中完成所有操作，然后在安装完成后删除所需的依赖项。

我之前写了一个设置教程。尽管它是直接基于alpine的。

使用Docker部署ReactJS

---

我写的Dockerfile是：

注意：你可以用yarn替换npm

文件：Dockerfile

FROM alpine

EXPOSE 80

ADD config/default.conf /etc/nginx/conf.d/default.conf

COPY . /var/www/localhost/htdocs

RUN apk add nginx && \
    mkdir /run/nginx && \
    apk add nodejs && \
    apk add npm && \
    cd /var/www/localhost/htdocs && \
    npm install && \
    npm run build && \
    apk del nodejs && \
    apk del npm && \
    mv /var/www/localhost/htdocs/build /var/www/localhost && \
    cd /var/www/localhost/htdocs && \
    rm -rf * && \
    mv /var/www/localhost/build /var/www/localhost/htdocs;

CMD ["/bin/sh", "-c", "exec nginx -g 'daemon off;';"]

WORKDIR /var/www/localhost/htdocs

用于nginx配置的文件

文件名：default.conf

server {
        listen 80 default_server;
        listen [::]:80 default_server;
        location / {
                root   /var/www/localhost/htdocs/build;
                # this will make so all routes will lead to      
                # index.html so that react handles the routes              
                try_files $uri $uri/ /index.html;
        }
        # You may need this to prevent return 404 recursion.
        location = /404.html {
                internal;
        }
}

希望这可以作为一个可能的替代方案。

- codingwithmanny