nginx启动vue项目,nginx.conf配置项

nginx.conf文件内容


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
error_log  D:/enviroment/nginx-1.24.0/logs;

#pid        logs/nginx.pid;
pid        D:/enviroment/nginx-1.24.0/logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen 8081;
        server_name localhost;

        gzip on;
        gzip_static on;     # 需要http_gzip_static_module 模块
        gzip_min_length 1k;
        gzip_comp_level 4;
        gzip_proxied any;
        gzip_types text/plain text/xml text/css;
        gzip_vary on;
        gzip_disable "MSIE [1-6]\.(?!.*SV1)";

        root D:/gitStore/812/wms-ui/dist/;    

        location ^~/api/ {
            proxy_pass http://127.0.0.1:9999/; #注意/后缀
            proxy_connect_timeout 60s;
            proxy_read_timeout 120s;
            proxy_send_timeout 120s;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto http;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Host $http_host;
        }
   
	}
}

### 部署Vue项目至Docker容器中使用Nginx 为了在Docker环境中利用Nginx部署Vue项目,需遵循一系列配置流程。此过程涉及创建`Dockerfile`来定义构建镜像所需的指令集以及编写必要的配置文件以确保应用程序能够正常工作。 #### 创建Dockerfile 首先,在项目的根目录下创建名为`Dockerfile`的文件。该文件用于指定如何组装最终的应用程序镜像。对于Vue项目而言,通常的做法是先安装依赖项并打包生产版本,之后再将静态资源复制到包含Nginx服务器的基础映像内[^1]: ```dockerfile # 使用官方Node.js作为基础镜像来进行构建阶段 FROM node:alpine AS builder WORKDIR /app COPY package*.json ./ RUN npm install --silent COPY . . RUN npm run build # 切换到Nginx镜像准备服务阶段 FROM nginx:stable-alpine # 将之前构建好的dist文件夹内容拷贝过来替换默认页面 COPY --from=builder /app/dist /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ``` 上述脚本展示了两步法:第一步是以Node.js为基础执行前端编译任务;第二步则是切换成带有预配置Web服务器的轻量级Linux发行版,并把生成的结果放置于适当位置供HTTP请求访问[^2]。 #### 设置环境变量 为了让应用更灵活地适应不同环境下的差异(比如开发、测试或线上),可以在`.env.production`文件中声明一些全局可用的关键字串,它们会被Webpack处理工具自动注入到JavaScript代码里面去。另外,也可以直接在`Docker Compose YAML`文档里设定特定的服务参数,从而影响启动时的行为模式[^3]: ```yaml version: '3' services: web: image: vue-app-with-nginx environment: - VUE_APP_ERMS_FTR=http://example.com/api/v1 ports: - "8080:80" ``` 这里提到的例子说明了怎样通过外部途径传递URL地址给内部使用的代理规则,使得跨域资源共享(CORS)问题得到妥善解决的同时还简化了维护成本。 #### 自定义Nginx配置 有时可能希望进一步调整反向代理行为或是启用额外的安全特性,则可以考虑自定义站点级别的设置。这一步骤涉及到修改位于宿主机上的模板文件并通过命令行指示符告知引擎加载新的副本而不是原始自带的那个[^5]: ```bash COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf ``` 以上操作会覆盖掉原有的虚拟主机描述部分,允许开发者按照实际需求定制响应策略和服务条款。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值