docker + nginx 部署vuejs3.0项目

本文详述了如何使用npm构建Vue.js项目,并通过Docker部署至腾讯云服务器的过程。包括项目打包、文件上传、Dockerfile配置、nginx设置、镜像构建及容器运行等关键步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1:用指令 npm run build 打包vusjs项目(该项目是在github上下载的)。打包成功后会生成一个目录dist。
在这里插入图片描述
2:把该文件夹拷贝到腾讯云服务器(操作系统 centos7)下的/usr/share目录下。
在这里插入图片描述
3:在/usr/share目录下新建Dockerfile文件
在这里插入图片描述
dockerfile文件内容:

复制代码

设置基础镜像

FROM nginx

定义作者

MAINTAINER longdb

将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面

COPY dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf
RUN echo ‘echo init ok!!’
复制代码
4:新建文件 nginx.conf。

文件内容:

复制代码
worker_processes auto;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;

#pid logs/nginx.pid;

events {
worker_connections 1024;
}

http {
include mime.types;
default_type application/octet-stream;

#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  logs/access.log  main;

sendfile        on;
#tcp_nopush     on;

#keepalive_timeout  0;
keepalive_timeout  65;

#gzip  on;

client_max_body_size   20m;
server {
    listen       80;
    server_name  www.longdb.com;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;
 location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $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   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;
    #}
}


# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
#    listen       8000;
#    listen       somename:8080;
#    server_name  somename  alias  another.alias;

#    location / {
#        root   html;
#        index  index.html index.htm;
#    }
#}

}
复制代码
5:cd 进入share目录,然后 用括号里指令(docker build -t longdb-vue:V1.0.0 . )构建镜像。(注意最后的 . )
在这里插入图片描述
6:运行生成成功的镜像:docker run -p 3000:80 -d --name longdbvuejs 34d9e8770f1b
在这里插入图片描述
参数讲解:

run: 创建一个新的容器并运行一个命令
-d: 后台运行容器,并返回容器ID
-p: 端口映射,格式为:主机(宿主)端口:容器端口
–name=“longdbvuejs”: 为容器指定一个名称

34d9e8770f1b --为生成好的images_id.

7:docker ps 指令查看有哪些在运行,上图中看到longvuejs在运行。(测试 http://193.112.82.83:3000/#/page2)

结果如下:
在这里插入图片描述

参考文章:https://blog.youkuaiyun.com/g631521612/article/details/82841282

<think>好的,用户想知道如何使用DockerNginx部署Spring Boot项目。我需要结合提供的引用内容,整理一个清晰的步骤指南。首先,根据引用[2]和[4],Docker Compose可以简化部署,自动处理依赖服务如Nginx和MySQL。所以使用Docker Compose是关键。 接下来,用户需要先准备Spring Boot应用的Docker镜像。引用[3]提到构建镜像的命令,比如docker build -t demo2-deplay:1.0 .,这里需要指导用户如何编写Dockerfile。然后,Nginx的配置也很重要,引用[5]指出前端打包生成dist文件,并通过Nginx反向代理到后端。因此,要配置Nginx的conf文件,设置代理到Spring Boot的容器。 还需要考虑docker-compose.yml的编写,引用[4]和[5]都有相关示例,需要整合MySQL、Redis、Spring Boot和Nginx的服务定义。特别是网络设置,确保各容器能互通。最后,启动命令docker-compose up,如引用[2]和[4]所述,确保依赖服务按顺序启动。 用户可能遇到的问题包括网络配置错误、服务启动顺序或Nginx代理设置不正确。需要提醒检查端口映射和配置文件路径是否正确。另外,参考提供的步骤是否完整,比如前端打包、镜像构建、Compose文件结构等,确保用户能一步步操作。</think>### 分步指南:使用 DockerNginx 部署 Spring Boot 项目 #### 一、准备工作 1. **Spring Boot 项目配置** - 确保项目已集成 MySQL 和 Redis 等依赖,并在 `application.yml` 中配置外部服务连接信息,例如: ```yaml spring: datasource: url: jdbc:mysql://mysql:3306/db_name username: root password: your_password redis: host: redis port: 6379 ``` **注意**:此处使用 Docker 容器名(如 `mysql`、`redis`)代替 IP,确保容器间可通过服务名通信[^2][^5]。 2. **前端项目打包** - 修改前端(如 Vue)的 API 请求地址为服务器 IP 或域名,使用 `npm run build:prod` 生成 `dist` 目录。 --- #### 二、编写 Docker 相关文件 1. **Spring Boot 的 Dockerfile** ```dockerfile FROM openjdk:11-jre COPY target/demo.jar /app.jar EXPOSE 8080 ENTRYPOINT ["java", "-jar", "/app.jar"] ``` 构建镜像命令: ```bash docker build -t springboot-app:1.0 . ``` 2. **Nginx 配置文件(nginx.conf)** ```nginx server { listen 80; server_name your_domain.com; location / { root /usr/share/nginx/html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://springboot-app:8080; proxy_set_header Host $host; } } ``` **说明**:将静态文件指向 `dist` 目录,并通过 `/api` 反向代理到 Spring Boot 容器[^4][^5]。 --- #### 三、编写 Docker Compose 文件 ```yaml version: &#39;3&#39; services: nginx: image: nginx:alpine ports: - "80:80" volumes: - ./dist:/usr/share/nginx/html - ./nginx.conf:/etc/nginx/conf.d/default.conf depends_on: - springboot-app springboot-app: image: springboot-app:1.0 environment: - SPRING_PROFILES_ACTIVE=prod depends_on: - mysql - redis mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: root_password MYSQL_DATABASE: db_name volumes: - mysql_data:/var/lib/mysql redis: image: redis:alpine ports: - "6379:6379" volumes: - redis_data:/data volumes: mysql_data: redis_data: ``` **关键点**: - 使用 `depends_on` 控制服务启动顺序[^2] - 通过命名卷(volumes)持久化 MySQL 和 Redis 数据[^5] - Nginx 通过容器名 `springboot-app` 代理后端服务 --- #### 四、启动服务 ```bash # 进入 docker-compose.yml 所在目录 docker-compose up -d ``` **验证步骤**: 1. 检查容器状态:`docker-compose ps` 2. 访问 `http://服务器IP/api/health` 确认 Spring Boot 接口正常 3. 访问 `http://服务器IP` 查看前端页面 --- #### 常见问题排查 1. **Nginx 502 Bad Gateway** - 检查 Spring Boot 容器是否启动成功:`docker logs <container_id>` - 确认 `proxy_pass` 地址是否为 Spring Boot 容器名[^4] 2. **数据库连接失败** - 确保 MySQL 容器已初始化完成(可能需要增加健康检查) - 验证环境变量(如密码)是否与 Spring Boot 配置匹配[^3] ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值