基于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鏡像”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！