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

文章正文第一句：“这是我参与更文挑战的第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以后，再写一个后端项目，而后再把代码分享出来。你们记得关注。