React学习与项目的搭建总结

创建一个react-app项目

搭建脚手架

这里就直接使用create-react-app 脚手架了。

安装脚手架

npm install -g create-react-app

创建项目

create-react-app address_search

Docker 打包镜像

根目录下面新建一个Dockerfile文件

# 使用node版本alpine
FROM node:alpine

# 代表生产环境
ENV PROJECT_ENV production
# 许多 package 会根据此环境变量，做出不同的行为

# 另外，在 webpack 中打包也会根据此环境变量做出优化，但是 create-react-app 在打包时会写死该环境变量
ENV NODE_ENV production

# 进入code文件夹，如果没有则会生成，并进入文件夹
WORKDIR /code
# 将当前内容 放入code文件夹
ADD . /code

# 执行指令
RUN yarn install && yarn build && npm install -g http-server

# 暴露容器端口 8080
EXPOSE 8080

# 当执行docker run的时候会执行以下shell 脚本。
CMD http-server ./build -p 8080

构建镜像

docker build -t=reactapp .

build完成后可以查看镜像列表

docker images

然后启动镜像变为容器

 docker run -p 4040:8080 reactapp

后面更一些这个项目 k8s部署的总结吧