nginx + docker 部署react or vue 前端项目(ubuntu16.04)

nginx + docker 部署react or vue 前端项目(ubuntu16.04)

安装docker (参考：docker官网)

1. 下载docker
2. sudo dpkg -i /path/to/package.deb

安装docker-compose

3. sudo curl -L "https://github.com/docker/compose/releases/download/1.22.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
4. sudo chmod +x /usr/local/bin/docker-compose
5. 测试安装
   docker-compose --version

build 前端项目(react为例)

1. npm run build —> 生成build文件夹

编写docker-compose.yml 文件（与build同级）

version: '3'
services:
  # 服务名称
  nginx:
    # 镜像:版本
    image: nginx:latest 
    container_name: my_nginx
    # 映射容器80端口到本地80端口
    ports:
     - "80:80"
    # 数据卷 映射本地文件到容器
    volumes:
    # 映射nginx.conf文件到容器的/etc/nginx/conf.d目录并覆盖default.conf文件
     - ./nginx.conf:/etc/nginx/conf.d/default.conf
    # 映射build文件夹到容器的/usr/share/nginx/html文件夹
     - ./build:/usr/share/nginx/html
    # 覆盖容器启动后默认执行的命令。
    command: /bin/bash -c "nginx -g 'daemon off;'"

编写nginx.conf （与build同级）

# gzip设置
gzip on;
gzip_vary on;

gzip_comp_level 6;
gzip_buffers 16 8k;

gzip_min_length 1000;
gzip_proxied any;
gzip_disable "msie6";
#gzip_http_version 1.0;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        # 其作用是按顺序检查文件是否存在，返回第一个找到的文件或文件夹（结尾加斜线表示为文件夹），如果所有的文件或文件夹都找不到，会进行一个内部重定向到最后一个参数。
        try_files $uri /index.html;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

本机测试

1. 开启docker并运行容器（需要进入docker-compose.yml所在的路径中）

sudo docker-compose up -d   # 不是管理员权限执行会报错 Couldn't connect to Docker daemon at http+docker://localhost - is it running?

2. 关闭并删除此容器

docker-compose down

3. 进入容器

docker-compose exec nginx bash
or
docker container exec -it my_nginx  /bin/bash

打包项目传到服务器并解压运行上线

tar -zcvf xxx.tar.gz build docker-compose.yml nginx.conf
scp xxx.tar.gz remote_username@remote_ip:remote_folder 
tar -zxvf xxx.tar.gz -C /www