在CentOS云服务器中使用nginx部署Vue项目

江南第二深情
510 阅读4分钟

文章正文第一句：“这是我参与更文挑战的第1天，活动详情查看： 更文挑战”

部署前端项目

  1. 首先是在自己的电脑上写完前端项目，然后运行npm run build 生成一个dist文件夹。

  2. 容器化包括三个阶段，包括编写代码，我们已经完成。构建镜像和创建和运行容器。

  3. 构建Docker镜像主要应用自动创建，我们可以在我么的项目的根目录创建一个Dockerfile文件，里面的内容就是构建镜像的一条条指令

    #该镜像基于nginx镜像而构建
FROM nginx
#将项目根目录下dist文件夹下的所有文件复制到镜像中/usr/share/nginx/html/目录下
COPY dist/ /usr/myDocker/client/html/
#将nginx目录下的default.conf复制到/etc/nginx/conf.d/default.conf
#用本地的配置替换nginx镜像里的默认配置
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
# Dockerfile是一个用来构建镜像的文本文件，内容包含了一条条构建镜像的指令

  4. 我们需要自己写一个nginx的配置文件，构建镜像的时候用来替换nginx服务器里面默认的配置

    #虚拟主机的配置
server {
	#nginx的监听端口号
    listen       80;
    #访问域名，可以有多个，空格隔开
    server_name  82.156.197.106;

    #charset koi8-r;
    #定义本虚拟主机的访问日志
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;
	#对“/”启动反向代理
    location / {
        #定义了首页的指向为/usr/myDocker/client/index.html
        #所以意思就是把打包后的index.html和相关的静态资源放到虚拟主机的/usr/share/nginx/html
        root   /usr/myDocker/client/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   /usr/share/nginx/html;
    }
}

  5. 这两个文件写完之后，我们需要把dist文件夹，dockerfile，nginx.conf这个三个文件通过Xftp送到云服务器的一个文件夹里面，这个文件夹只能有这三个文件，假设我们叫client。

  6. 还有一种方法就是给CentOS安装上git,node等环境，直接从github上把这个项目拉下来，然后npm install 和npm run build 。这样的话就需要注意需要增加一个.dockerignore文件，不打包node_moundle

  7. 一切准备就绪后，就可以构建我们自己的镜像了。我们云服务器的client目录下面执行命令docker build -t vue-client-image . 注意这个点是必须的。这样我们就构建好了一个镜像。这个时候我们可以使用docker images来查看我们创建的镜像。

  8. 然后我们就可以创建并运行我们的容器了，通过docker run -p 8080:80 --name client -d vue-client-image -p的意思是端口映射，将我们服务器的8080端口映射到nginx的80端口，因为我们在nginx.conf设置的就是80。这样我们就可以在自己的电脑上通过ip地址:8080来访问我们的项目了。注意我们一定要在服务器上打开8080端口。-d的意思是在后台运行这个容器

  9. docker ps 就可以查看都所有在后台运行的容器。 docker stop 容器id 就可以关闭运行的容器。docker rm 容器id就可以删除容器了。docker ps -a可以查看所有的容器。docker rmi 镜像id 删除镜像。

Docker中使用MySQL

  1. MySQL的使用和本地差不多，首先是使用mysql镜像创建一个容器，命令如下docker run -p 3306:3306 --name vue-mysql -e MYSQL_ROOT_PASSWORD=123456 -d mysql:5.7端口映射使用服务器的3306端口映射到mysql的3306端口，-e是配置信息，此处我们可以配置这个mysql服务的密码。这样我们的容器就搭建好了。
  2. docker exec -it vue-mysql bash 执行命令就可以进入我们创建的mysql服务了。注意我们还需要用密码登录进去 我们的mysql服务器。命令是 mysql -uroot -p123456 。登陆进去后的操作就跟我们平常的一样了。
  3. 我们尝试使用navicat连接到我们服务器中的mysql服务。跟平常一样，localhost换成我们的域名。

后记

对于一个全栈项目来说，我们还少了后端的代码，等我学一学nest.js之后，再写一个后端项目，然后再把代码分享出来。大家记得关注。

avatar
文章
阅读
粉丝