云服务器部署 nginx

使用nginx来部署静态页面网站

1. 在华为云上购买服务器，这里使用centos操作系统为例。创建完成后在云服务器列表点击远程登录选项，并选择使用CloudShell登录。当然也可以选择使用其他方式登录。
   
2. 输入刚才创建操作系统时设置的密码即可成功登录。登录后界面如下。左侧是文件的目录，右侧是一个命令行界面，可以执行一系列操作系统的命令。
   
3. 使用命令行安装nginx并启动

   yum install nginx -y  
   nginx
   

4. 安装启动完成后访问自己的服务器的弹性公网ip即可得到nginx的初始化页面
   
5. 由于在nginx的默认配置里面的根路径对应的是/usr/share/nginx/html目录，所以我们上面访问服务器的ip地址才会得到nginx的初始化页面页面，这里我们可以修改为/var/www/html目录
   首先使用vi /etc/nginx/nginx.conf命令进入nginx的配置文件，点击i进入编辑模式，编辑完成后点击Esc键，再输入:wq进行保存

   server {
           listen       80 default_server;
           listen       [::]:80 default_server;
           server_name  _;
           root         /var/www/html;    
           # Load configuration files for the default server block.
           include /etc/nginx/default.d/*.conf;
   
           location / {
             root        /var/www/html
            }
   
           error_page 404 /404.html;
               location = /40x.html {
           }
   
           error_page 500 502 503 504 /50x.html;
               location = /50x.html {
           }
   }
   

   
6. 创建项目目录，并在/var/www/html目录下创建一个html文件让nginx访问。注意文件名称只能是index.html，否则无法直接通过服务器ip地址访问，而是需要在ip地址后面加上文件名才可以得到。

   mkdir -p /var/www/html
   touch index.html
   

7. 重启nginx并且进行访问

   nginx -s reload
   

8. 访问服务器ip地址得到
   
9. 若要上传本地的项目，可以将项目打包后使用FileZilla图形化界面软件进行上传。主机一列要填入root@+服务器公网ip地址。链接成功后，就可以选择本地的已经打包的项目进行上传，可以自定义上传的服务器目录。其余操作还是和上述步骤类似。
   
10. 这里以webstorm打包vue项目并上传到云服务器为例
    1. 若vue项目中的配置文件为vue.config.js，可以使用如下配置

       module.exports = {
           outputDir: 'dist',
           productionSourceMap: true,
           assetsDir: 'static', // 静态资源目录 (js, css, img, fonts)
           publicPath: '/',
           css: {
               sourceMap: true
           },
       
           configureWebpack: {
               performance: {
                   hints:'warning',
                   //入口起点的最大体积
                   maxEntrypointSize: 50000000,
                   //生成文件的最大体积
                   maxAssetSize: 30000000,
                   //只给出 js 文件的性能提示
                   assetFilter: function(assetFilename) {
                       return assetFilename.endsWith('.js');
                   }
               }
           }
       };
       

    2. 若vue项目中的配置文件为config目录下的index.js，则需要一下两步骤：
       • 打开Vue下的build下面的utils.js文件，添加publicPath：“…/…/”

         if (options.extract) {
               return ExtractTextPlugin.extract({
                 use: loaders,
                 publicPath:"../../",
                 fallback: 'vue-style-loader'
         

       • 打开Vue下的config下面的index.js文件，找到build下的assetsSubDirectory和assetsPublicPath，将它们修改为如下代码所示：

           build: {
             // Template for index.html
             index: path.resolve(__dirname, '../dist/index.html'),
          
             // Paths
             assetsRoot: path.resolve(__dirname, '../dist'),
             assetsSubDirectory: './static',
             assetsPublicPath: './',
           }
         

    3. 在terminal中运行npm run build就可以进行打包，打包完成后根目录下会出现一个dist目录，里面存放了项目的静态资源static和一个index.html文件
    4. 使用第9步的工具连接云服务器并上传dist目录
    5. 使用上面类似的方法配置修改nginx的配置文件中的根目录为/dist
    6. 使用nginx -s reload重启nginx，并访问公网ip就可以得到vue项目啦！