docker下nginx部署vue项目

最新推荐文章于 2025-11-05 21:16:35 发布

原创最新推荐文章于 2025-11-05 21:16:35 发布 · 1.9k 阅读

6 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

2 篇文章

订阅专栏

环境centos7
准备:

安装git
安装nodejs
安装docker

拉取git仓库
cd ~ #进入home目录
git clone *********.sto.git #后面是仓库地址
切换分支

cd ~/sto
git branch -a 		#查看分支 以* 开头的是当前分支

*master
  dev
  remotes/origin/HEAD -> origin/master
  remotes/origin/custom
  remotes/origin/customer
  remotes/origin/dev
  remotes/origin/master

git checkout -b dev origin/dev 		#切换到dev分支

准备nginx

创建目录 ~/nginx-sto/html 用于映射nginx的/usr/share/ngix/html目录前端工程打包后的文件将放置到~/nginx-sto/html目录中
创建目录~/nginx-sto/conf 用于映射nginx的配置文件的目录一般是/etc/nginx
cd ~nginx-sto/conf #进入~nginx-sto/conf

vi nginx.conf

将以下配置写到nginx.conf中

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

	location / {
            try_files $uri $uri/ @router;
            index  index.html index.htm;
        }

        location @router {
        	rewrite ^.*$ /index.html last;
        }

#用于访问后台的api
	location /crs-api {
        	rewrite  ^/crs-api/(.*)$ /$1 break;
             	proxy_pass  http://xxx.xx.xx.xx:8080;
     	}

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
}

5.docker下安装nginx

docker run --name nginx-sto -d -p 8180:80 -v /etc/timezone:/etc/timezone:ro -v /etc/localtime:/etc/localtime:ro -v ~/nginx-sto/html:/usr/share/nginx/html -v ~/nginx-sto/conf:/etc/nginx  registry.docker-cn.com/library/nginx

其中registry.docker-cn.com/library/nginx是nginx的镜像

使用docker ps 查看镜像

docker ps

使用docker pull 拉取镜像

docker pull 镜像名称

6.编写执行脚本
vi ~/sto.sh
写入以下脚本

#!/bin/bash

#进入前端工程目录
cd sto
#拉取代码
git pull
# 构建前端工程
npm install
npm run build
#删除nginx的html映射目录下的文件
rm -rf ~/nginx-sto/html/*
#将构建够的前端代码复制到html映射目录下
cp -r ~/stochastic/dist/* ~/nginx-sto/html/