基于centos如何通过nginx部署react前端代码生成docker镜像

这篇文章主要介绍基于centos如何通过nginx部署react前端代码生成docker镜像，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

1.Dockerfile文件内容如下

FROM centos:centos7

MAINTAINER dengyunshuo <dengyunshuo@163.com>

ADD http://nginx.org/download/nginx-1.15.3.tar.gz .

RUN yum install -y pcre-devel wget net-tools gcc zlib zlib-devel make openssl-devel

RUN tar -zxvf nginx-1.15.3.tar.gz

RUN mkdir -p /usr/local/nginx

RUN cd nginx-1.15.3 && ./configure && make && make install

RUN ln -s /usr/local/nginx/sbin/* /usr/local/sbin/

RUN rm /usr/local/nginx/conf/nginx.conf

ADD nginx.conf /usr/local/nginx/conf/

RUN rm /usr/local/nginx/html/index.html

RUN mkdir -p /usr/local/nginx/html/static

COPY dist/ /usr/local/nginx/html/static

EXPOSE 80

CMD ["nginx"]

2.前端项目dist文件夹

dist

|---img

|---index.html

|---static

|---umi.css

|---umi.css.map

|---umi.js

|---umi.js.map

3.nginx.conf配置文件

daemon off;

user  root;

worker_processes  4;

events {

    worker_connections  1024;

}

http {

    include       mime.types;

    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {

        listen       80;

        server_name  localhost;

        location / {

    add_header Access-Control-Allow-Origin '*'; #允许来自所有的访问地址

            add_header Access-Control-Allow-Credentials 'true';

            add_header Access-Control-Allow-Methods 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式

            add_header Access-Control-Allow-Headers 'Content-Type,*';

            root   html/static;

            index  index.html index.htm;

        }

        error_page   500 502 503 504  /50x.html;

        location = /50x.html {

            root   html;

        }

    location ^~ /static/static/ {

        root html;

    }

    }

}

4.生成镜像文件

docker build -t bms-nginx:0.0.1 .

5.查看生成的镜像

docker images

6.启动镜像

docker run -d --name bms-nginx -p 80:80 --network bms-nginx bms-nginx:0.0.1

以上是“基于centos如何通过nginx部署react前端代码生成docker镜像”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！